解決因為手機設置字體大小導致h5頁面在webview中變形的BUG

首先，我們做了一個H5頁面，在各種手機瀏覽器中打開都沒問題。我們采用了rem單位進行布局，通過JS來動態計算網頁的視窗寬度，動態設置html的font-size，一切都比較完美。

這時候，你自信滿滿的將h5地址交給了APP工程師，做了一個WEBVIEW嵌套，然后就順利交工了。

測試組在一堆手機中測試APP，突然，在某個手機上打開，你的頁面布局了亂了，字變大或者變小，總之很奇葩。

你怎么也不會想到是手機設置字體大小造成的。

因為默認瀏覽器中的內容是不受系統字體大小設置控制的，至少我遇到的幾臺手機都是這樣的情況。但是APP不一樣，APP是受那個玩意兒控制的！！

問題描述清楚了，出現這個問題，有以下因素

> 1.你的頁面采用了rem單位，并且是采用js動態計算html的font-size

> 2.你的頁面被加在了APP中的webview中

> 3.這該死的手機被重設了字體大小

二、解決

方案一：【h5解決】

需要在設置完字體大小之后，再去重新獲取一下html的font-size，這樣就可以實現當實際的值與我們設置的值不一樣時，根據比例再設置一次。

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";

}

}

方案二：【客戶端解決】

iOS

在iPhone系統設置中的“更大字體”里調整字號后，各個應用里中Webview里的文字大小似乎沒有受到影響。但是對于諸如微信、UC瀏覽器等可以在APP里設置網頁字體大小的應用，還是有限制調整字號的需求的。它們調整字體大小是通過給body設置-webkit-text-size-adjust屬性實現的，因此只要限制這個屬性不被修改即可：

body {

-webkit-text-size-adjust: none !important;

}

Android

如果是在自己開發的APP中，可以在客戶端的WebView組件中設置字體默認的縮放比例，以避免手機系統的字體修改對頁面字體及布局造成影響。

WebSettings settings = webView.getSettings();

settings.setTextZoom(100);

總結

以上是生活随笔為你收集整理的android webview 字体被放大,解决因为手机设置字体大小导致h5页面在webview中变形的BUG...的全部內容，希望文章能夠幫你解決所遇到的問題。

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