背景

最近，端內在做 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.時事點評：主要是關于互聯網的，比如小米高管屌絲事件，拼多多女員工猝死事件等

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/275401.html

標籤：AI

上一篇：重磅官宣：Nacos2.0性能提升10倍

下一篇：照貓畫虎，分分鐘學會的Matplotlib技巧：反轉軸、繪制雙軸和定制刻度

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

背景