背景

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

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

于是，我問自己，為什么會這樣呢？

原因分析

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

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

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

setLoadWithOverviewMode

這個方法的作用，簡單來說，就是是否根據(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…

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

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

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

可以看到里面字體的單位是 px，跟 Android 的 dp px 有點像，是不是沒作屏幕適配？

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

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

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

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)頁字體的適配規(guī)則，這里就不班門弄斧了,有興趣的可以自行搜索。

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

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

總結(jié)

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

WebView 字體常見的其他坑

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

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

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

這個通常有兩種解決方案。

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

1. 一般，我們動態(tài)計算好html的font-size之后，我們就啥都不干了，就走了。
2. 但是，我們現(xiàn)在知道了，我們設(shè)置的大小不一定是真實的大小，所以，我們需要在設(shè)置完字體大小之后，再去重新獲取一下html的font-size，看看實際的這個值，和我們設(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 是可以通過 WebSettings 禁止網(wǎng)頁字體縮放的，可以通過 setTextZoom 方法解決

webview.getSettings().setTextZoom(100)

小結(jié)

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

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

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

最新評論