移动端网页在华为手机上显示不正常解决办法
日期：2020-11-12 阅读：2919 分类：学无止境 标签：JS
在移动端页面开发时，用rem单位布局，配合js计算出一个根节点的font-size（原理是屏幕宽度乘以一个固定比例，如1/100），之后页面中所有的px全都换算成了rem单位来写，优点是能适配各种不同屏幕尺寸的手机，不需要写媒体查询！
前不久在开发移动端网页时，在主流手机上进行测试，发现华为手机P30和P40手机上页面显示不正常，其他安卓机和苹果手机在周围同事能借到的均显示正常。
上面左边图为华为P40上显示不正常，右边图为realme安卓机上显示正常（在微信里面进去打开页面）。
在试过几种方案宣告失败后，在网上看到一中解决办法说是因为采用的是rem布局，在页面rem计算完成后，比较document.documentElement.style.fontSize和window.getComputedStyle(document.documentElement)["font-size"]，发现两个值不一样，导致某些元素通过rem计算后的值，产生了误差。
解决办法如下：
/** flexible.js自适应尺寸调整 **/
window.onresize = function(){
getRem(750,100)
}
function getRem(pwidth,prem){
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth/pwidth*prem + "px";
//以下四行重置根节点的font-size，适配华为P40等部分机型
var settedFs = parseInt(html.style.fontSize);
var realFs = parseInt(window.getComputedStyle(html).fontSize);
var settingFs =settedFs*settedFs/realFs;
html.setAttribute('style', 'font-size:'+settingFs + 'px!important');
}
window.onload = function() {
getRem(750,100);
//...其他脚本
}
问题完美解决。
相关参考文章：