蓝少个人博客

实迷途其未远,觉今是而昨非

移动端网页在华为手机上显示不正常解决办法

日期:2020-11-12 阅读:1461 分类:学无止境 标签:JS 

在移动端页面开发时,用rem单位布局,配合js计算出一个根节点的font-size(原理是屏幕宽度乘以一个固定比例,如1/100),之后页面中所有的px全都换算成了rem单位来写,优点是能适配各种不同屏幕尺寸的手机,不需要写媒体查询!

前不久在开发移动端网页时,在主流手机上进行测试,发现华为手机P30和P40手机上页面显示不正常,其他安卓机和苹果手机在周围同事能借到的均显示正常。

上面左边图为华为P40上显示不正常,右边图为realme安卓机上显示正常(在微信里面进去打开页面)。

在试过几种方案宣告失败后,在网上看到一中解决办法说是因为采用的是rem布局,在页面rem计算完成后,比较document.documentElement.style.fontSizewindow.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);
    //...其他脚本
}
问题完美解决。


相关参考文章:

解决华为手机用rem单位,内容超出屏幕宽度问题

Android部分webview rem计算误差记录