由于微信webvie內(nèi)置了調(diào)整字體大小的功能，如果用戶調(diào)整了這一設(shè)置，就會(huì)導(dǎo)致了網(wǎng)頁中的字體比原本的尺寸偏大或偏小，使得網(wǎng)頁可能出現(xiàn)排版錯(cuò)亂。那么如何來防止頁面布局出錯(cuò)呢？這篇文章就以js來實(shí)現(xiàn)移動(dòng)端微信禁止字體被放大或縮小。
iOS
在 iOS 下，對(duì)網(wǎng)頁的 body 元素設(shè)置 -webkit-text-size-adjust: 100% !important;可以覆蓋掉微信的樣式。
body {
? ? -webkit-text-size-adjust: 100% !important;
? ? text-size-adjust: 100% !important;
? ? -moz-text-size-adjust: 100% !important;
}
Android
在 Android 下，需要通過WeixinJSBridge對(duì)象將網(wǎng)頁的字體大小設(shè)置為默認(rèn)大小，并且重寫設(shè)置字體大小的方法，讓用戶不能在該網(wǎng)頁下設(shè)置字體大小。
(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 });
? ? ? ? });
? ? }
? ? })();
注意：如果用戶之前已經(jīng)設(shè)置過了字體大小，訪問網(wǎng)頁時(shí)會(huì)先看到字體被放大后的效果再恢復(fù)正常，因?yàn)樵赪eixinJSBridge 對(duì)象初始化完成之后才能通過 WeixinJSBridge 對(duì)象的方法設(shè)置為默認(rèn)大小。
期間會(huì)有一個(gè)1秒左右的延遲，期間可以考慮通過loading展示，僅供參考
