uniapp 解决 h5 PC端屏幕过大失真问题_rpxcalcmaxdevicewidth-CSDN博客

本文链接：https://blog.csdn.net/weixin_43245095/article/details/123995768

本文探讨了在微信小程序中，设置`rpxCalcMaxDeviceWidth`和`rpxCalcBaseDeviceWidth`参数来确保750rpx在不同屏幕尺寸下保持375px效果的问题。当屏幕宽度超过960px时，通过自定义`maxWidth`实现页面居中，以及`rpxCalcIncludeWidth`来确保rpx计算准确。两种写法分别对应默认和自定义情况，用于处理屏幕适配和H5页面居中显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

解决

目前我也暂时不知道为什么有时候设置了 rpxCalcMaxDeviceWidth 后当屏幕宽度超过 960px后应该 750rpx 应该等于375px 但是有时候又不行
所以目前有两种写法一种是默认的另一种是自定义默认不行就使用另外一种
pages.json "globalStyle" 对象中填写如下

默认

"rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
"rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
"rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750

自定义

"maxWidth": 960, //当浏览器可见区域宽度大于 maxWidth 时两侧留白，当小于等于 maxWidth 时页面铺满。不同页面支持配置不同的maxWidth。单位 px。
"rpxCalcMaxDeviceWidth": 960,  // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
"rpxCalcBaseDeviceWidth": 375,  // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
"rpxCalcIncludeWidth": 9999  // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750