背景

最近，端內(nèi)在做 webView 統(tǒng)一的時(shí)候，個(gè)性簽名中的 WebView 替換為 CustomWebView 之后，發(fā)現(xiàn)字體突然變小。

一開(kāi)始不知道是什么原因，通過(guò)二分法查找最近的提交，排查之后，發(fā)現(xiàn)是 SignatureWebView 的繼承關(guān)系從 WebView 修改為 CustomWebView。revert 之后就正常了。

于是，我問(wèn)自己，為什么會(huì)這樣呢？

原因分析

我們知道，WebViewSetting 里面是可以修改 WebView 的一些默認(rèn)設(shè)置的。

閱讀官方文檔，發(fā)現(xiàn) setLoadWithOverviewMode，setUseWideViewPort 這兩個(gè)方法看起來(lái)跟 WebView 縮放相關(guān)。

于是嘗試把 setLoadWithOverviewMode 改為 false，很神奇，竟然正常了。

setLoadWithOverviewMode

這個(gè)方法的作用，簡(jiǎn)單來(lái)說(shuō)，就是是否根據(jù)屏幕寬度自適應(yīng)

Sets whether the WebView loads pages in overview mode, that is, zooms out the content to fit on screen by width. This setting is taken into account when the content width is greater than the width of the WebView control, for example, when getUseWideViewPort() is enabled. The default is false.

developer.android.com/reference/a…

這個(gè)問(wèn)題解決之后，我心中又有這樣的疑問(wèn)，為什么別的地方?jīng)]有問(wèn)題，只有個(gè)性簽名這里的 WebView 有問(wèn)題。

帶著這個(gè)疑問(wèn)，我再次去瀏覽代碼，發(fā)現(xiàn)個(gè)性簽名里面 Webview 加載的網(wǎng)頁(yè)，是自己拼接的 html。debug 之后，發(fā)現(xiàn)網(wǎng)頁(yè)代碼大概是這樣的

<span style="word-wrap:break-word;font-family:system-ui;font-size:16px;color:#888888;">Https://www.baidu.com</span>

可以看到里面字體的單位是 px，跟 Android 的 dp px 有點(diǎn)像，是不是沒(méi)作屏幕適配？

搜索發(fā)現(xiàn) Web 網(wǎng)頁(yè)的代碼適配單位是 rem，有點(diǎn)類(lèi)似于 dp。

Web 網(wǎng)頁(yè)在適配分辨率的時(shí)候，通常會(huì)設(shè)置 viewport 屬性

于是我嘗試在代碼里面加了這樣的代碼，發(fā)現(xiàn) SignatureWebView 顯示個(gè)性簽名又正常了。

parsedHtml += "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover\">";

Web 網(wǎng)頁(yè)字體的適配規(guī)則，這里就不班門(mén)弄斧了,有興趣的可以自行搜索。

端內(nèi)其他地方排查

我們知道，加載自定義 html，通常需要調(diào)用 loadDataWithBaseURL 方法，查看端內(nèi)調(diào)用的地方，發(fā)現(xiàn)其他都是正常的。只有這個(gè)奇葩 SignatureWebView ，自己拼接的 html 沒(méi)有加 viewport 屬性，進(jìn)行適配

總結(jié)

1. 如果 html 是自己拼接的，并且像素是 px，不要設(shè)置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort（默認(rèn)屬性是 false），否則字體可能顯示不正常，偏大或者偏小
2. 如果 html 是自己拼接的，并且像素是 px，當(dāng)我們?cè)O(shè)置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort 為 true（根據(jù)屏幕自適應(yīng)），那么我們需要設(shè)置 html 的 viewport 規(guī)則，否則可能顯示不正常
3. html 如果是自己拼接的，需要注意適配規(guī)則，像個(gè)人簽名這種，用 webView 承載自己拼接的 html ，防止踩坑
   

WebView 字體常見(jiàn)的其他坑

手機(jī)設(shè)置字體大小導(dǎo)致h5頁(yè)面在webview中變形

出現(xiàn)這個(gè)問(wèn)題的原因是

1. 默認(rèn)瀏覽器中的內(nèi)容是不受系統(tǒng)字體大小設(shè)置控制的，至少我遇到的幾臺(tái)手機(jī)都是這樣的情況。
2. 某些機(jī)型 WebView 字體的大小是受手機(jī)系統(tǒng)字體大小控制的

這個(gè)通常有兩種解決方案。

Web js 網(wǎng)頁(yè)解決方案

1. 一般，我們動(dòng)態(tài)計(jì)算好html的font-size之后，我們就啥都不干了，就走了。
2. 但是，我們現(xiàn)在知道了，我們?cè)O(shè)置的大小不一定是真實(shí)的大小，所以，我們需要在設(shè)置完字體大小之后，再去重新獲取一下html的font-size，看看實(shí)際的這個(gè)值，和我們?cè)O(shè)置的是不是一樣。
3. 如果不一樣，就要根據(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";
 }
}

客戶端 WebView 禁止縮放

Android WebView 是可以通過(guò) WebSettings 禁止網(wǎng)頁(yè)字體縮放的，可以通過(guò) setTextZoom 方法解決

webview.getSettings().setTextZoom(100)

小結(jié)

這篇文章主要是記錄 bug 的一個(gè)解決過(guò)程，技術(shù)含量不高，但是有一定的參考價(jià)值。尤其是 bug 的解決思路。

1. 線上突然出現(xiàn)問(wèn)題，一直找不出問(wèn)題，嘗試一下二分法，逐步縮小范圍。
2. 有時(shí)候，我們找到解決方案，卻不一定知道原因是什么，這時(shí)候，可以多問(wèn)一下自己，背后的原因是什么？在排查的過(guò)程中，我們會(huì)逐漸培養(yǎng)自己的一套問(wèn)題解決思路，聽(tīng)起來(lái)很虛，但是確實(shí)存在的。
3. 知道原因之后，我們可以繼續(xù)再進(jìn)一步排查一下，項(xiàng)目中其他模塊是不是也存在這樣的問(wèn)題。
4. 以后要怎么規(guī)避之類(lèi)問(wèn)題？寫(xiě)個(gè) wiki 或者博客記錄一下

以上就是Android webView字體突然變小的原因及解決的詳細(xì)內(nèi)容，更多關(guān)于Android webView字體突然變小的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論