前端新手——适配不同手机端页面的方案，动态查询dpr设置根元素font-size

首先，说句题外话，博主只是个前端菜鸟，本片文章根据网上众多大神的文章+请教大神前辈+实践得出的一个总结。水平有限，说的不对的地方还请各位看官多多指教。

言归正传，最近博主的公司交给博主一项任务，搭建公司产品的wap页面，然后还是独立完成。再然后设计甩了一份适配ip6的设计图来，然后博主就开工了。

由于还是菜鸟，移动端的经验不多，简单考虑了一下形成了一个初步的解决方法，

1.宽度使用百分比，高度使用rem，通过media query设置html根元素的font-size

@media screen and (max-width:321px){
    html{font-size:14px;-webkit-text-size-adjust: none;}
    input{font-size:14px;}
}
@media screen and (min-width:322px) and (max-width:639px){
    html{font-size:16px;-webkit-text-size-adjust: none;}
    input{font-size:16px;}
}
@media screen and (min-width:640px) and (max-width:719px){
    html{font-size:20px;-webkit-text-size-adjust: none;}
    input{font-size:20px;}
}
@media screen and (min-width:720px) {
    html{font-size:24px;-webkit-text-size-adjust: none;}
    input{font-size:24px;}
}

然后测试的时候发现悲剧了，各部分使用rem做高度的部分，在不同设备上的显示不同，会被拉伸，方案被否。

2.通过请教大神前辈，告知了一个思路：动态写dpr 和根元素的fontsize，并给了github里winter大神的淘宝无线团队的解决方案，但是博主智商捉急，并没有找到。然后大神前辈见此，甩给博主一个地址 <a target=_blank href="http://www.html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold">手机淘宝的flexible设计与实现</a>，这篇winter大神今年初写的文章，获益匪浅。

然后博主就开始实践了，其中关于ppi,dpr等知识可看winter大神的文章。博主通过计算设备宽度与dpr，然后动态的给html根元素设置font-size，页面各部分高度根据font-size设置rem。测试时发现还是有点问题，iphone6plus上显示错乱。

然后博主又开始搜索，终于发现 <a target=_blank href="http://www.zan3.com/zan2607.html">移动端h5页面之iphone6的适配</a> ，设置<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">刚好解决问题，起码在chrome上调试是没有问题的。

<span style="font-family: Arial, Helvetica, sans-serif;"><img src="https://img-blog.csdn.net/20150722225629284?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
</span>

<span style="font-family: Arial, Helvetica, sans-serif;">动态写dpr 和根元素的fontsize：
</span>

!function(x) {
    function w() {
        var a = r.getBoundingClientRect().width;
        a / v > 540 && (a = 540 * v), x.rem = a / 16, r.style.fontSize = x.rem + "px"
    }
    var v, u, t, s = x.document, r = s.documentElement, q = s.querySelector('meta[name="viewport"]');
    if (q) {
        console.warn("将根据已有的meta标签来设置缩放比例");
        var o = q.getAttribute("content").match(/initial\-scale=(["‘]?)([\d\.]+)\1?/);
        o && (u = parseFloat(o[2]), v = parseInt(1 / u))
    }
    if (!v && !u) {
        var n = (x.navigator.appVersion.match(/android/gi), x.navigator.appVersion.match(/iphone/gi)), v = x.devicePixelRatio;
        v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, u = 1 / v
    }
    if (r.setAttribute("data-dpr", v), !q) {
        if (q = s.createElement("meta"), q.setAttribute("name", "viewport"), q.setAttribute("content", "initial-scale=" + u + ", maximum-scale=" + u + ", minimum-scale=" + u + ", user-scalable=no"), r.firstElementChild) {
            r.firstElementChild.appendChild(q)
        } else {
            var m = s.createElement("div");
            m.appendChild(q), s.write(m.innerHTML)
        }
    }
    x.dpr = v, x.addEventListener("resize", function() {
        clearTimeout(t), t = setTimeout(w, 300)
    }, !1), x.addEventListener("pageshow", function(b) {
        b.persisted && (clearTimeout(t), t = setTimeout(w, 300))
    }, !1), "complete" === s.readyState ? s.body.style.fontSize = 12 * v + "px" : s.addEventListener("DOMContentLoaded", function() {
        s.body.style.fontSize = 12 * v + "px"
    }, !1), w()
}(window);

最后说一句，博主不生产代码，只是代码的搬运工。