移动端适配rem为单位的rem.js及个别设备设置了大字体模式，导致页面变形的处理方式

这段时间内，涉及到的都是移动端开发，说到移动端开发，我们就会思考到，目前分辨率的问题，如果用px为单位的话，在不同移动设备和不同分辨率下，页面的效果可能会有所不同，甚至导致页面变形。所以在次我们就用到了rem，使用rem为单位，在任何移动端下显示的效果都是一样的。

只要我们在页面的head中引入下面的 rem.js :

! function(n) {
    var e = n.document,
        t = e.documentElement,
        i = 750,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function() {
            var n = t.clientWidth || 320;
            n > 750 && (n = 750);
            t.style.fontSize = n / d + "px"
        };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))    
}(window);

 

上面的一段rem.js代码在一般情况下都是没有问题，但是如果遇到了某些设备设置了大字体模式（老人机模式，哈哈），页面的显示效果就会变形，所以根据这一情况，经过完善后的rem.js 如下：

;(function(win) {
     var docEl = win.document.documentElement,
         tid;
 
     function refreshRem() {
         var width = docEl.getBoundingClientRect().width;
         var rem = width / 750*100;//以750px为原稿，除以100可得各元素的rem
         docEl.style.fontSize = rem + "px";
         var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
         if (actualSize !== rem) {
             var remScaled = rem / ( actualSize / rem );
             docEl.style.fontSize = remScaled + "px"
         }
    }
 
     function dbcRefresh() {
         clearTimeout(tid);
         tid = setTimeout(refreshRem, 100)
     }
 
     win.addEventListener("resize", function() { dbcRefresh() }, false);
     win.addEventListener("pageshow", function(e) {
         if (e.persisted) { dbcRefresh() }
     }, false);
     refreshRem();
})(window);

 

上面的rem.js 都是根据750px设计的，100px = 1rem