動態計算好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;

}

總結

以上是生活随笔為你收集整理的html网站手机最小字体大小,html在手机浏览器如何设置字体大小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。