uni-app <page-meta> 设置root-font-size在低版本安卓上无效

uni-app <page-meta> 设置root-font-size在低版本安卓上无效

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

操作步骤:

  • 将test.zip 中的test.vue 放入项目中,在低版本安卓上(7.1.2)上运行

预期结果:

  • 740rem差一点占满屏幕

实际结果:

  • 740rem超出屏幕很多

bug描述:

真机和模拟器的安卓版本7.1.2,平板模式。以及hbuilder内置的浏览器上,<page-meta> 设置root-font-size无效。高版本安卓和谷歌浏览器就有效。

预期的计算如下: 100 vw / 750 = 0.133 也就是说,我740rem,就可以差一点占满屏幕。但是实际上超出很多

下载test.zip


更多关于uni-app <page-meta> 设置root-font-size在低版本安卓上无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app <page-meta> 设置root-font-size在低版本安卓上无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在低版本安卓系统(如7.1.2)上,<page-meta>root-font-size 属性可能因兼容性问题失效。这通常是由于旧版WebView内核(如Android 7.x默认的Chrome 60以下版本)对CSS单位rem或视口单位vw的支持不完善导致的。

原因分析

  1. 低版本安卓的WebView对CSS视口单位(如vw)或rem的计算可能存在偏差,尤其在平板模式下,视口或root-font-size的基准值未按预期生效。
  2. <page-meta> 在部分旧环境中可能无法动态更新根字体大小,导致rem计算错误。

临时解决方案

  1. 改用pxrpx:在低版本安卓上,优先使用uni-app的rpx单位(基于750设计稿自适应),避免依赖rem
  2. JS动态设置根字体大小:在页面onReady中,通过JS计算并设置document.documentElement.style.fontSize,替代<page-meta>
    onReady() {
      const clientWidth = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = `${clientWidth / 7.5}px`;
    }
回到顶部