首先，說句題外話，博主只是個前端菜鳥，本片文章根據網上眾多大神的文章+請教大神前輩+實踐得出的一個總結。水平有限，說的不對的地方還請各位看官多多指教。

言歸正傳，最近博主的公司交給博主一項任務，搭建公司產品的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);

最後說一句，博主不生產程式碼，只是程式碼的搬運工。