禁止微信內置瀏覽器調整字體大小,從而保證頁面不錯亂

最近發如今微信瀏覽器調整頁面的字體大小時,會打亂頁面的整個佈局,在網上找了找解決的方案,找到了如下此方案,有效的解決了這個問題

目前iOS的解決方案是覆蓋掉微信的樣式:
/* IOS禁止微信調整字體大小 */
body {
    -webkit-text-size-adjust: 100% !important;
}
安卓的解決方案是經過 WeixinJSBridge 對象將網頁的字體大小設置爲默認大小,而且重寫設置字體大小的方法,讓用戶不能在該網頁下設置字體大小:

/*

 * android禁止微信瀏覽器調整字體大小android

 *  這種方法會致使網頁延遲大約1Sweb

 */segmentfault

     //android禁止微信瀏覽器調整字體大小
        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 });
            });
        }

這樣解決會出現的問題:瀏覽器

   一、若是用戶在標準狀況下,打開頁面。再調整字體大小,那麼頁面依舊正常。微信

   二、若是用戶先調整了字體大小,再打開頁面,頁面會變大,一秒以後恢復正常。佈局

   注:採用loading,可解決2的問題字體

 

參考文章: https://segmentfault.com/q/1010000011631008spa

相關文章
相關標籤/搜索