Woolle
Woolle
  • 发布:2022-02-23 15:42
  • 更新:2022-03-01 11:09
  • 阅读:947

.vue和.nvue 页面同样宽度600rpx的布局,在客户端上大小不一致

分类:uni-app
rpx

目标设备:Android车机 分辨率 1280(宽)x720 160dpi

.vue 和 .nvue 两个页面使用同一样式,宽度都设置为 600rpx 的 view 。

现象:发行应用wgt(编译模式uni-app),显示布局大小不一致,如附件。

问题:

  1. 请问是什么原因导致效果不一致,是否需要一些其他配置,包括原生端需要一些配置?

pages.json 配置

"globalStyle": {  
          "rpxCalcMaxDeviceWidth": 750,  
          "rpxCalcBaseDeviceWidth": 750,  
          "rpxCalcIncludeWidth": 750,  
          "dynamicRpx": true  
     }

发行应用wgt运行效果,见附件。

页面代码如下,内容一样,后缀分别是 .vue 和 .nvue

<template>  
    <view class="content">  
        <view class="text-area">  
            <text class="title">{{title}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello_VUE'  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .content {  
        /* display: flex; */  
        flex-direction: column;  
        /* align-items: center; */  
        justify-content: center;  
    }  
    .text-area {  
        display: flex;  
        justify-content: center;  
        background-color: #DD524D;  
        width: 600rpx;  
    }  
    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>  
2022-02-23 15:42 负责人:DCloud_Android_ST 分享
已邀请:
[已删除]

[已删除]

是运行在android 还是 ios?
一定要打wgt 运行才有问题吗

  • Woolle (作者)

    只试了wgt,是android

    2022-02-23 18:06

  • [已删除]

    回复 Woolle: 你打包成wgt.然后怎么运行呢

    2022-02-23 19:35

  • Woolle (作者)

    回复 [已删除]: 放在外置存储,通过 DCUniMPSDK.getInstance().releaseWgtToRunPath 释放wgt后, DCUniMPSDK.getInstance().openUniMP 打开

    2022-02-24 09:27

  • [已删除]

    回复 Woolle: 明白。我试一下

    2022-02-24 11:38

  • Woolle (作者)

    回复 [已删除]: 有时间帮忙看下这个问题,感谢!

    2022-02-28 09:28

  • [已删除]

    回复 Woolle: 我这边测试没复现啊。 能提供一个具体的示例吗。 或者你加我qq 发我 643833712

    2022-02-28 12:24

[已删除]

[已删除]

我这边测试hx 3.3.12 alpha 直接运行时正常的

  • Woolle (作者)

    我用的是hx3.3.11,那我用3.3.12 alpha试一试

    2022-02-23 18:06

  • Woolle (作者)

    直接运行到浏览器是ok的,打包成wgt运行到Android 设备上(车机分辨率 1280(宽)x720),上就会显示有问题

    2022-02-23 18:53

DCloud_Android_ST

DCloud_Android_ST

由于该问题复现需要特殊设备 我们这边会尽量协调验证问题。你可以暂时使用px单位 或设置"dynamicRpx": false

  • Woolle (作者)

    好的谢谢,设备信息 :Android车机 分辨率 1280(宽)x720 160dpi

    2022-03-01 13:57

  • 芒果味的秋天

    这个问题有结果了,我现在遇到的同样的问题,rpxCalcMaxDeviceWidth 这个字段设置了之后,vue页面会有效果,nvue没有效果

    2022-04-20 21:01

  • DCloud_Android_ST

    回复 芒果味的秋天: nvue不支持rpxCalcMaxDeviceWidth

    2022-04-21 11:29

  • 海角

    我也遇到了 设置高度1rpx vue高度比nvue的要高

    2023-12-20 14:26

该问题目前已经被锁定, 无法添加新回复