移動端微信里打開H5頁面，頁面字體放大

背景：移動端H5頁面，視口設置<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />

　　　qq、瀏覽器打開頁面字體大小正常

問題：微信打開頁面，頁面的字體被放大，感覺整體被放大

解決：

iOS: 

無論是系統自帶的調整字體大小，還是一些App自帶的調整字體大小iOS是調整WebView字體大小是通過給body添加-webkit-text-size-adjust來實現的，所以只需在body修改-webkit-text-size-adjust屬性即可，下面寫的這兩種方法都可以，選其一即可，方法如下：

/* IOS微信、UC瀏覽器阻止字體大小調整 */
body {
-webkit-text-size-adjust: none !important;
}
body {
-webkit-text-size-adjust: 100% !important;
}

Android：

Android則要分為兩種情況：

1、阻止系統自帶的字體大小調整方式對自己開發的App的WebView的影響需要添加下面的代碼到WebView組件設置字體默認縮放比例中。

WebSettings settings = webView.getSettings();
settings.setTextZoom(100);

2、對於阻止微信調整字體對頁面的影響，我們需要添加下面的代碼到頁面中：

//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) {
　　//IE瀏覽器，非W3C規范
　　　　document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
　　}
}
function handleFontSize() {
   // 設置網頁字體為默認大小
　　WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
　　// 重寫設置網頁字體大小的事件
　　WeixinJSBridge.on('menu:setfont', function() {
　　　　WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
　　});
}
})();

這種方式的缺陷就是，頁面先看到的是字體被放大的效果，然后閃回到正常的展示，估計1s，是因為WeixinJSBridge初始化需要一點時間，要等到WeixinJSBridge初始化后才可以調用其的方法設置字體到默認大小。