手机端适配rem

针对近日华为，小米的部分机型，在升级系统或升级微信之后，微信内置浏览器产生的rem不能正确填充满的问题，有如下解决方案

目前来看，产生这个情况的原因是因为给html附font-size时，附上的font-size和实际上html的font-size 大小并不一致

如图：

 

 

 在问题机型上展示的三个值 分别为 1.机型最终附给html的font-size大小  2.我想赋给html的font-size大小 3.二者的倍数

尝试找了多个问题机型，最终的比例都是1.25左右（1.24999），所以解决方案如下

//针对机型适配的代码就不贴了  网上随手一搜一堆 这里就针对特殊机型的处理展示一下
var docEl = doc.documentElement,
    setFontSize = function() {
       var clientWidth = document.documentElement.clientWidth,
           timer;
           if(!clientWidth) return;
　　　　　　 //原本对于html的字号设置 我这里用的是750的标准 ，640的也是同理
           docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';

　　　　　　
           if(window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize) {
              var size = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.split('p')[0];

 　　　　　　   //这里再取出当前html的font-size，和你想附的值进行比较，
              //这里为什么不直接用size< 原因是正常机型的size也不一定等于你想附的值，尝试了很多机型，除了问题机型外，一般差距很小，另一半完全相等;      
　            //为什么不直接*1.25 也不解释了 最终比例不一定是1.25                
              if(size*1.2 < 100 * (clientWidth / 750)) {
　　　　　　　　　　//如果当前html的font-size 的1.2倍仍然小于 之前想设置的值，就说明是问题机型，给之前想附的值乘1.25倍，这样他会被系统再次除1.25得到的才是我们想附的值
                 docEl.style.fontSize = 125 * (clientWidth / 750) + 'px';
              }
            }
       };

em。。。。大致上能看的明白吧

至于为什么会产生这个问题，目前还不清楚，可能是因为微信浏览器或者问题机型对于根字号的处理细节不一致，可能以后会处理，但暂时没有啥别的好方法，嗯

转自https://www.cnblogs.com/Lmey/p/12218444.html

/*
    作者:helang
    此版本应用于 750px尺寸的 iOS 设计稿
    rem计算方式：设计图尺寸px / 100 = 实际rem  【例: 100px = 1rem，32px = 0.32rem】
 */
!function (window) {
    /* 设计图文档宽度 */
    var docWidth = 750;
    var doc = window.document,
        docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    var recalc = (function refreshRem () {
        /* 窗口当前宽度 */
        var clientWidth = docEl.getBoundingClientRect().width;
        /* 页面宽度大于 750 时不再放大 */
        clientWidth = clientWidth > 750 ? 750 : clientWidth;
        var oldSize = (clientWidth/docWidth*100) + 'px';
        docEl.style.fontSize = oldSize;

        /* 获取设置后的字体大小情况 - 因微信设置APP字体大小后会影响该设置 */
        var nowSize = window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize;
        var oldSizeValue = parseFloat(oldSize,10);
        var nowSizeValue = parseFloat(nowSize,10);

        /* 当差值大于1时重新按差比计算出正确的px值 */
        if((nowSizeValue - oldSizeValue) > 1 || (nowSizeValue - oldSizeValue) < -1){
            var diff = (oldSizeValue / nowSizeValue);
            docEl.style.fontSize = (clientWidth/docWidth*100*diff) + 'px';
        }
        return refreshRem;
    })();
    /* 添加倍屏标识，安卓为1 */
    docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);
    if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
        /* 添加IOS标识 */
        doc.documentElement.classList.add('ios');
        /* IOS8以上给html添加hairline样式，以便特殊处理 */
        if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
            doc.documentElement.classList.add('hairline');
    }
    if (!doc.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
}(window);