微信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
});
});
}
})();