移動端rem布局，使用者調整手機字型大小或瀏覽器字型大小後導致頁面配置出錯問題

標籤：gets   頁面   移動端   user   bsp   settings   瀏覽器設定   font   設定   

一、使用者修改手機字型設定大小，影響App裡開啟的web頁面。

手機字型設定大小，影響App的頁面。
Android的可以通過webview配置webview.getSettings().setTextZoom(100)就可以禁止縮放，按照百分百顯示。

二、使用者調整瀏覽器字型大小，影響的是從瀏覽器開啟的web頁

瀏覽器設定字型大小，影響瀏覽器開啟的頁面。通過js可控制使用者修改字型大小，使頁面不受影響。

 

(function(doc, win) {//      用原生方法擷取使用者佈建的瀏覽器的字型大小(相容ie)        if(doc.documentElement.currentStyle) {            var user_webset_font=doc.documentElement.currentStyle[‘fontSize‘];        }        else {            var user_webset_font=getComputedStyle(doc.documentElement,false)[‘fontSize‘];        }//      取整後與預設16px的比例係數        var xs=parseFloat(user_webset_font)/16;//      設定rem的js設定的字型大小        var view_jsset_font,result_font;        var docEl = doc.documentElement,        resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,        clientWidth,        recalc = function() {            clientWidth = docEl.clientWidth;            if(!clientWidth) return;            if(!doc.addEventListener) return;            if(clientWidth<750){//              設定rem的js設定的字型大小                view_jsset_font=100 * (clientWidth / 750);//              最終的字型大小為rem字型/係數                result_font=view_jsset_font/xs;//              設定根字型大小                docEl.style.fontSize = result_font + ‘px‘;                }            else{                docEl.style.fontSize = 100 + ‘px‘;                }        };    win.addEventListener(resizeEvt, recalc, false);    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);})(document, window);

 

移動端rem布局，使用者調整手機字型大小或瀏覽器字型大小後導致頁面配置出錯問題