部分android手机webview中h5页面设计与真实字体大小不一致解决方案
摘要首选,h5页面是在所有web浏览器显示正常,采用rem弹性设置的前提下,个别android机出现的字体不一致,导致页面整体变大或变小的情况。H5的解决方案。环境部分android手机中webview内嵌h5页面编辑工具HBuild X经调试发现同一台手机,同样的代码var clientWidth = document.documentElement.clientWidth;var bodyWi
·
摘要
首选,h5页面是在所有web浏览器显示正常,采用rem弹性设置的前提下,个别android机出现的字体不一致,导致页面整体变大或变小的情况。H5的解决方案。
环境
部分android手机中webview内嵌h5页面
编辑工具HBuild X
经调试发现同一台手机,同样的代码
var clientWidth = document.documentElement.clientWidth;
var bodyWidth=$('body').width();
clientWidth是不一样的,比如有时是360,有时是1080.
而我们经常 clientWidth = document.documentElement.clientWidth计算rem与px的换算关系。因为clientWidth获取的值有差异时,计算的换算关系就不准确了,经过测试bodyWidth=$(‘body’).width()是一直不变的。当两个不一样时,建议采用bodywidth来计算,如下面代码。
function setPX(){
const html = document.getElementsByTagName('html')[0];
const realFs = parseFloat(window.getComputedStyle(html).fontSize);
var clientWidth = document.documentElement.clientWidth;
var bodyWidth=$('body').width();
var fontSize;
if(bodyWidth<clientWidth){
clientWidth=bodyWidth;
}
if (clientWidth >= 750) {
document.documentElement.style.fontSize = '100px';
} else {
fontSize=clientWidth / 7.5;
document.documentElement.style.fontSize = fontSize+'px';
}
}
结语:
欢迎加入微信群一起学习讨论!
更多推荐
已为社区贡献2条内容
所有评论(0)