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,就可以差一点占满屏幕。但是实际上超出很多
更多关于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的支持不完善导致的。
原因分析:
- 低版本安卓的WebView对CSS视口单位(如
vw)或rem的计算可能存在偏差,尤其在平板模式下,视口或root-font-size的基准值未按预期生效。 <page-meta>在部分旧环境中可能无法动态更新根字体大小,导致rem计算错误。
临时解决方案:
- 改用
px或rpx:在低版本安卓上,优先使用uni-app的rpx单位(基于750设计稿自适应),避免依赖rem。 - JS动态设置根字体大小:在页面
onReady中,通过JS计算并设置document.documentElement.style.fontSize,替代<page-meta>。onReady() { const clientWidth = document.documentElement.clientWidth; document.documentElement.style.fontSize = `${clientWidth / 7.5}px`; }

