Android webView字體突然變小的原因及解決

Posted on by

背景

最近，端內在做 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 屬性，進行適配

總結

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

WebView 字體常見的其他坑

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

出現這個問題的原因是

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

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

Web js 網頁解決方案

  1. 一般，我們動態計算好html的font-size之後，我們就啥都不幹瞭，就走瞭。
  2. 但是，我們現在知道瞭，我們設置的大小不一定是真實的大小，所以，我們需要在設置完字體大小之後，再去重新獲取一下html的font-size，看看實際的這個值，和我們設置的是不是一樣。
  3. 如果不一樣，就要根據比例再設置一次。
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 的解決思路。

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

以上就是Android webView字體突然變小的原因及解決的詳細內容，更多關於Android webView字體突然變小的資料請關註WalkonNet其它相關文章！

推薦閱讀：