Android WebView 踩坑日記，字體怎麼突然變小了？？？

-Advertisement-

背景最近，端內在做 webView 統一的時候，個性簽名中的 WebView 替換為 CustomWebView 之後，發現字體突然變小。一開始不知道是什麼原因，通過二分法查找最近的提交，排查之後，發現是 SignatureWebView 的繼承關係從 WebView 修改為 CustomWeb ...

背景

最近，端內在做 webView 統一的時候，個性簽名中的 WebView 替換為 CustomWebView 之後，發現字體突然變小。

一開始不知道是什麼原因，通過二分法查找最近的提交，排查之後，發現是 SignatureWebView 的繼承關係從 WebView 修改為 CustomWebView。revert 之後就正常了。

於是，我問自己，為什麼會這樣呢？

原因分析

我們知道，WebViewSetting 裡面是可以修改 WebView 的一些預設設置的。

閱讀官方文檔，發現 setLoadWithOverviewMode，setUseWideViewPort 這兩個方法看起來跟 WebView 縮放相關。

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

setLoadWithOverviewMode

這個方法的作用，簡單來說，就是是否根據屏幕寬度自適應

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…

這個問題解決之後，我心中又有這樣的疑問，為什麼別的地方沒有問題，只有個性簽名這裡的 WebView 有問題。

帶著這個疑問，我再次去瀏覽代碼，發現個性簽名裡面 Webview 載入的網頁，是自己拼接的 html。debug 之後，發現網頁代碼大概是這樣的

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

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

搜索發現 Web 網頁的代碼適配單位是 rem，有點類似於 dp。

Web 網頁在適配解析度的時候，通常會設置 viewport 屬性

於是我嘗試在代碼裡面加了這樣的代碼，發現 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 網頁字體的適配規則，這裡就不班門弄斧了,有興趣的可以自行搜索。

端內其他地方排查

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

總結

如果 html 是自己拼接的，並且像素是 px，不要設置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort（預設屬性是 false），否則字體可能顯示不正常，偏大或者偏小
如果 html 是自己拼接的，並且像素是 px，當我們設置 WebViewSetting 的 setLoadWithOverviewMode ，setUseWideViewPort 為 true（根據屏幕自適應），那麼我們需要設置 html 的 viewport 規則，否則可能顯示不正常
html 如果是自己拼接的，需要註意適配規則，像個人簽名這種，用 webView 承載自己拼接的 html ，防止踩坑

WebView 字體常見的其他坑

手機設置字體大小導致h5頁面在webview中變形

出現這個問題的原因是

預設瀏覽器中的內容是不受系統字體大小設置控制的，至少我遇到的幾台手機都是這樣的情況。
某些機型 WebView 字體的大小是受手機系統字體大小控制的

問題解決方案來自這篇文章：blog.csdn.net/FungLeo/art…

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

Web js 網頁解決方案

一般，我們動態計算好html的font-size之後，我們就啥都不幹了，就走了。
但是，我們現在知道了，我們設置的大小不一定是真實的大小，所以，我們需要在設置完字體大小之後，再去重新獲取一下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";
    }
}

客戶端 WebView 禁止縮放

Android WebView 是可以通過 WebSettings 禁止網頁字體縮放的，可以通過 setTextZoom 方法解決

webview.getSettings().setTextZoom(100)

可以禁止縮放，按照百分百顯示。

小結

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

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

找到我

我是站在巨人的肩膀上成長起來的，同樣，我也希望成為你們的巨人。覺得不錯的話可以關註一下我的微信公眾號程式員徐公，在此感謝各位大佬們。主要分享

1.Android 開發相關知識：包括 java，kotlin， Android 技術。
2.面試相關分享：包括常見的面試題目，大廠面試真題、面試經驗套路分享。
3.演算法相關學習筆記：比如怎麼學習演算法，leetcode 常見演算法總結，跟大家一起學習演算法。
4.時事點評：主要是關於互聯網的，比如小米高管屌絲事件，拼多多女員工猝死事件等

希望我們可以成為朋友，成長路上的忠實伙伴！

您的分享是我們最大的動力!