博客

uniapp 解决 h5 PC端 屏幕过大失真 问题

  • Post author:
  • Post category:uniapp




效果

在这里插入图片描述



解决

目前 我也暂时不知道为什么 有时候设置了 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

这里的 maxWidth主要用来 h5过大时页面居中显示 可以不加 “rpxCalcIncludeWidth”: 9999 设置了这个后 750rpx 等于 375px


版权声明：本文为weixin_43245095原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。