手机端自适应
<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没卵用。
