rem布局，在使用者調整手機字型大小/使用者調整瀏覽器字型大小後，布局錯亂問題

標籤：turn   float   cti   ted   change   res   顯示   縮放   resize   

一、使用者調整瀏覽器字型大小，影響的是從瀏覽器開啟的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);

　　

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

         手機字型設定大小，影響App的頁面。

         Android的可以通過webview配置webview.getSettings().setTextZoom(100)就可以禁止縮放，按照百分百顯示。

rem布局，在使用者調整手機字型大小/使用者調整瀏覽器字型大小後，布局錯亂問題