uni-app 从3.2.3升级到3.2.9后 浏览器pc端样式异常 所有元素偏大 审查元素html显示273px 实际分辨率为1366px

uni-app 从3.2.3升级到3.2.9后 浏览器pc端样式异常 所有元素偏大 审查元素html显示273px 实际分辨率为1366px

操作步骤:

  • 升级hbuilder到3.2.9

预期结果:

  • 正常显示pc端网页

实际结果:

  • 未正常显示

bug描述:

从3.2.3升级到3.2.9之后,运行到浏览器pc端样式有问题,所有都偏大,而且审查元素html只有273px,我是1366px的分辨率,回退到3.2.3版本都正常显示,没有修改代码,请问是什么原因导致的。

图片

Image 1 Image 2

项目信息

项目信息 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 window10
HBuilderX类型 正式
HBuilderX版本号 3.2.9
浏览器平台 Chrome
浏览器版本 95
项目创建方式 HBuilderX

更多关于uni-app 从3.2.3升级到3.2.9后 浏览器pc端样式异常 所有元素偏大 审查元素html显示273px 实际分辨率为1366px的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 从3.2.3升级到3.2.9后 浏览器pc端样式异常 所有元素偏大 审查元素html显示273px 实际分辨率为1366px的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于 uni-app 3.2.9 版本中 H5 端默认的视口(viewport)缩放策略发生了变化导致的。在 3.2.3 版本中,H5 平台默认会进行一定的缩放适配,而在 3.2.9 版本中,为了更精确地还原设计稿尺寸,默认采用了 1:1 的像素映射,并可能调整了 initial-scale 等视口属性。

核心原因:审查元素显示的 273px 是 CSS 像素(逻辑像素),而你的屏幕物理分辨率是 1366px。在 3.2.9 中,视口宽度被设置为了类似 273px 的逻辑值,导致页面以较小的逻辑视口进行渲染,但又被放大到整个屏幕宽度,因此所有元素看起来“偏大”。

解决方案(在 pages.json 中配置):

  1. 全局设置:在 pages.jsonglobalStyle 或具体页面的 style 中,添加 "rpxCalcMaxDeviceWidth": 1366(或你的设计稿基准宽度),并确保 "rpxCalcIncludeWidth": 1366。这可以控制 rpx 计算的最大设备宽度。
  2. 调整视口:检查或显式设置 viewport 相关选项。虽然 uni-app 默认会生成视口标签,但你可以尝试在 manifest.jsonh5 节点下配置:
    {
      "h5": {
        "meta": {
          "viewport": "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
        }
      }
    }
回到顶部