手机端自适应

• meta - 放在head标签里

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• dpr - 放在head的结束标签之前（个人不建议使用，我着实没发现它有什么卵用）

<script>
    (function () {
        var viewport = document.querySelector('meta[name=viewport]');
        var dpr = window.devicePixelRatio;
        var scale = 1 / dpr;
        var content = 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale;
        document.querySelector('html').setAttribute('data-dpr', dpr);
        viewport.setAttribute('content', content);
    })();
</script>

• rem - 放在class为g-wrap的开始标签之后，这里的g-wrap你可以看成是body标签

<script>
    (function (win, doc) {
        function isPc() {
            var userAgentInfo = navigator.userAgent;
            var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
            var flag = true;
            for (var v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false;
                    break;
                }
            }
            return flag;
        }

        function resize() {
            var html = doc.querySelector('html');
            var wrap = doc.querySelector('.g-wrap');
            if (isPc()) {
                html.classList.add('.g-pc');
            } else {
                html.classList.remove('.g-pc');
            }
            html.style.fontSize = wrap.offsetWidth / 10 + 'px';
        }

        resize();
        win.addEventListener('resize', resize);
    }(window, document));
</script>

吐槽dpr

• 我着实不知道这个dpr加上缩放有什么卵用，还会增加一些不必要的负担，例如商详页的商品描述一般都是别的地方转过来的数据，里面的数据自带标签还有字体大小单位是px，经过dpr缩放几倍之后，看起来会很小，还有通过dpr进行放大，恶不恶心。图片倒是还好，加个最大 宽度10rem就醒了（这里的10是个人分割的，根据你自己的分割情况而定，为什么用10rem，不用100%，因为有些div标签自带宽度很宽很宽，超过了最大宽度，你100%就失去了意义，只有10rem可以解决）
• 说高清吧，确实会高清，但是也是在没有给图片加rem的情况下，例如iphone4，设备屏幕物理像素是640x940px，css像素是320x480px，dpr是2，我设置了dpr缩放0.5倍之后，body的宽度变成了640和设备的物理像素一致了，一张css像素为375px的图片，看起来确实更清晰一些，但是这种高清有个卵用？图片不能自适应了，如果我想让用户传最大为750px的图，那用户传的375px是不是就是5rem，当我给图片设置5rem的宽度，图片展示起来又不是高清了，那我要dpr有个卵用？
• 这里的dpr我个人是没有加的,在此仅作为记录，万一有什么奥妙是我没有参悟透彻的呢，还请有谁知道这个dpr有什么卵用的高级玩家大发善心帮我详细解释一下，最好是验证过的，因为我没验证出来到底有什么卵用。
• 我最后的最后又验证了下使用背景，发现同样清晰，最后又重新验证了一下图片，发现还是清晰，我个人得出的结论是dpr没什么卵用。dpr没什么卵用。dpr没什么卵用。
• 最后的最后再最后，我发现清晰和图片的缩放比例有关，因为即使我使用了dpr，调小图片的宽度，它依然会有时清晰有时不清晰，可能也和谷歌浏览器的渲染机制有关吧，因为我是用谷歌浏览器模拟测试的。
• 最最最最最最最最后，我又用小米mix2测试了一下，发现加或者不加dpr都是清晰的，懒得继续测试了，就这样吧，不了了之吧。
• 最最最最最最最最最最最后，还是想吐槽一句，dpr没卵用。