禁止微信內建瀏覽器調整字型大小
微信webview內建了調整字型大小的功能,使用者可以根據實際情況進行調節。
但是這也會導致字型大小改變以後,出現頁面佈局錯亂的情況,目前iOS的解決方案是覆蓋掉微信的樣式:
body { /* IOS禁止微信調整字型大小 */
-webkit-text-size-adjust: 100% !important;
}
安卓的解決方案是通過 WeixinJSBridge 物件將網頁的字型大小設定為預設大小,並且重寫設定字型大小的方法,讓使用者不能在該網頁下設定字型大小:
/*
* android禁止微信瀏覽器調整字型大小
* 這種方法會導致網頁延遲大約1S
*/
(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
});
});
}
})();