禁用微信 webview 調整字體大小

     原文：http://www.grycheng.com/?p=2411　　

     微信 webview 內置了調整字體大小的功能，對於網頁的可用性來講是一個很實用的功能。一些網頁的字體設置太小致使用戶看不清文字，調整字體大小便可解決這個問題。

　　

 

　　可是對於一些追求顯示效果的移動端頁面來講，字體大小的調整可能會致使部分文字沒法顯示甚至是頁面佈局出錯。如圖，大衆點評案例。

 

　　解決方案

　　微信的 iOS 版的調整字體大小使用的是經過給 body 設置 -webkit-text-size-adjust:120% 屬性實現的，Android 則是用過 Java 調用 webview 的 API 設置字體大小。

　　由於這兩個系統實現調整字體大小的原理不一樣，因此須要兩種方法來限制微信對網頁字體大小的調整。

　　iOS

　　在 iOS 下，對網頁的 body 元素設置 -webkit-text-size-adjust: 100% !important; 能夠覆蓋掉微信的樣式。

　

1 body {
2 -webkit-text-size-adjust: 100% !important;
3 }

 

　　Android

　　在 Android 下，須要經過 WeixinJSBridge 對象將網頁的字體大小設置爲默認大小，而且重寫設置字體大小的方法，讓用戶不能在該網頁下設置字體大小。

　　

(function() {

　　if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {

　　handleFontSize();

　　} else {

　　if (document.addEventListener) {

　　document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);

　　} else if (document.attachEvent) {

　　document.attachEvent("WeixinJSBridgeReady", handleFontSize);

　　document.attachEvent("onWeixinJSBridgeReady", handleFontSize);

　　}

　　}

　　function handleFontSize() {

　　// 設置網頁字體爲默認大小

　　WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });

　　// 重寫設置網頁字體大小的事件

　　WeixinJSBridge.on('menu:setfont', function() {

　　WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });

　　});

　　}

　　})();

 

　　注意：若是用戶以前已經設置過了字體大小，訪問網頁時會先看到字體被放大後的效果再恢復正常，由於在 WeixinJSBridge 對象初始化完成以後才能經過 WeixinJSBridge 對象的方法設置爲默認大小。

　　Android 延遲生效問題錄屏：

　　

 

　　測試用例

　　http://www.grycheng.com/case/resize_font.html

　　總結

　　因爲實現原理的不一樣，目前的解決方案只在 iOS 上表現完美，Android 下仍然有延遲生效問題。若是你有更好的解決方案，歡迎在評論裏補充。