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

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

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

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

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

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

問題描述清楚了，出現(xiàn)這個問題，有以下因素

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

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

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

二、解決

方案一：【h5解決】

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

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系統(tǒng)設(shè)置中的“更大字體”里調(diào)整字號后，各個應用里中Webview里的文字大小似乎沒有受到影響。但是對于諸如微信、UC瀏覽器等可以在APP里設(shè)置網(wǎng)頁字體大小的應用，還是有限制調(diào)整字號的需求的。它們調(diào)整字體大小是通過給body設(shè)置-webkit-text-size-adjust屬性實現(xiàn)的，因此只要限制這個屬性不被修改即可：

body {

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

}

Android

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

WebSettings settings = webView.getSettings();

settings.setTextZoom(100);

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。