uni-app 报一个关于rpx的bug 有实例

uni-app 报一个关于rpx的bug 有实例

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.7

浏览器平台：Chrome

浏览器版本：86.0.4240.198

示例代码：

<template>  
    <view class="body">  
        我是主体，我的实际宽度750px（正确的）  
        <view></view>  
        因为我在pages.json -> globalStyle -> maxWidth = 750  
        <view class="dingwei">  
            我的css宽度是750rpx，实际宽度是整个视口的宽度（错误）  
        </view>  
        <view class="dingwei" style="width: 749rpx;">  
            我的css宽度是749rpx，实际宽度是749px（正确）  
        </view>  
    </view>  
</template>  
<style>  
.body{  
    background: red;  
    min-height: 100vh;  
}  
.dingwei{  
    top: 50%;  
    width: 750rpx;  
    background: black;  
    color: #FFF;  
}  
</style>  
<script>  
    export default {  
        data() {return {}},  
        onLoad() {},  
        methods: {}  
    }  
</script>  

{  
    "pages": [  
        {"path": "pages/index/index"}  
    ],  
    "globalStyle": {  
        "maxWidth": 750,  
        "rpxCalcMaxDeviceWidth": 750,  
        "rpxCalcBaseDeviceWidth": 750,//设计的宽度  
        "rpxCalcIncludeWidth": 750,  

        "navigationStyle": "custom"//隐藏导航  
    }  
}

操作步骤：

见描述

预期结果：

在页面大于750px时，750rpx = 750px

实际结果：

见描述

bug描述：

因为我的pc端最大设置为750px，pages.json -> globalStyle -> maxWidth = 750 而且其他的也是750 “rpxCalcMaxDeviceWidth”: 750, “rpxCalcBaseDeviceWidth”: 750,//设计的宽度 “rpxCalcIncludeWidth”: 750, 所以在屏幕大于750px时，1rpx=1px， 但bug就出来这里 749rpx = 749px 750rpx = 视口的宽度


更多关于uni-app 报一个关于rpx的bug 有实例的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题已解决，找了好久， pages.json -> globalStyle -> rpxCalcIncludeWidth = 9999 就可以了

更多关于uni-app 报一个关于rpx的bug 有实例的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的rpx计算边界值问题。当设置maxWidth:750且设备宽度超过750px时，750rpx的计算结果会错误地等于视口宽度而非预期的750px。

问题根源在于rpx转换逻辑在边界值处理上的缺陷。当设计稿宽度、最大宽度和rpx基准值都设为750时，系统在计算750rpx这个特定值时出现了逻辑错误。

临时解决方案：

  1. 使用749rpx或751rpx替代750rpx
  2. 改用px单位：width: 750px
  3. 使用calc计算：width: calc(750 * 1rpx)

推荐方案：

.dingwei {
    width: 749rpx; /* 或 750px */
    max-width: 100%;
}
回到顶部