900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html网站手机最小字体大小 html在手机浏览器如何设置字体大小

html网站手机最小字体大小 html在手机浏览器如何设置字体大小

时间:2020-06-13 13:51:31

相关推荐

html网站手机最小字体大小 html在手机浏览器如何设置字体大小

动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值(webview受到系统字体设置大小的一个你想),和我们设置的是不是一样。如果不一样,就要根据比例再设置一次。

tag:解决因为手机设置字体大小导致h5页面在webview中变形的BUG。

1、你的页面采用了rem单位,并且是采用js动态计算html的font-size

2、你的页面被加在了APP中的webview中

3、这该死的手机被重设了字体大小

function htmlFontSize() {

var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

var width = w > h ? h : w;

width = width > 720 ? 720 : width

var fz = ~~(width * 100000 / 36) / 10000

document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";

var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000

if (fz !== realfz) {

document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";

}

}

htmlFontSize();

.font-cc{

font-size:0.14rem;//font-size:14px;

}

.font-tt{

font-size:0.16rem;//font-size:16px;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。