h5手机适配

现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。

通过一天的查找资料跟以前的经验，总结了以下的方案：

1：前端样式固定用320px宽度做，左右留白，背景用颜色或者背景填充。

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui"/>

   图片用实际像素background-size: 100% 100%;

2：不写宽度，所有内容以中轴线为标准，左右铺开。

3：写好网页后用JS获取屏幕宽度，然后设置body:zoom（有时字体会有问题）或者scale（只适用于单页）缩放尺寸

4：参考淘宝方案http://www.html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold

设置html的font-size和viewport来控制大小

 

备注：关于window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip/dp/device independent pixels，设备独立像素）与屏幕密度有关

以下代码是以640px的设计图为例，用动态JS设置大小的代码

<script>
    (function(doc,win){
        var docEl=doc.documentElement,
        isIOS=navigator.userAgent.match(/iphone|ipod|ipad/gi),
        dpr=isIOS?Math.min(win.devicePixelRatio,3):1,
        scale=1/dpr,
        resizeEvt="orientationchange" in window?"orientationchange":"resize";
        docEl.dataset.dpr=dpr;

        var metaEl=doc.createElement("meta");
        metaEl.name="viewport";
        metaEl.content="initial-scale="+scale+",
        maximum-scale="+scale+", 
        minimum-scale="+scale;
        docEl.firstElementChild.appendChild(metaEl);

        var recalc=function(){
            var width=docEl.clientWidth;
            if(width/dpr>640){
                width=640*dpr
            }
            docEl.style.fontSize=100*(width/640)+"px"};
            recalc();
            if(!doc.addEventListener){return}
            win.addEventListener(resizeEvt,recalc,false)
    })(document,window);
    </script>

 比如：

以下代码是750px的设计图为例

头部直接定义<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

 <script type="text/javascript">
        "use strict";
        (function (e) {
            var i = 1, n = window.navigator.userAgent;
            var t = n.match(/iphone/i);
            var d = n.match(/yixin/i);
            var o = n.match(/Mb2345/i);
            var w = n.match(/mso_app/i);
            var a = n.match(/sogoumobilebrowser/gi);
            var r = n.match(/liebaofast/i);
            var s = n.match(/GNBR/i);
            function h() {
                var e = screen.width > 0 ? window.innerWidth >= screen.width || window.innerWidth == 0 ? screen.width : window.innerWidth : window.innerWidth, i, n;
                if (window.devicePixelRatio) {
                    i = window.devicePixelRatio
                } else {
                    i = t ? e > 818 ? 3 : e > 480 ? 2 : 1 : 1
                }
                if (t)e = screen.width;
                n = e > 1080 ? 144 : e / 7.5;
                n = n > 32 ? n : 32;
                window.screenWidth_ = e;
                window.htmlFontSize_ = n;
                if (d || o || w || a || r || s) {
                    setTimeout(function () {
                        e = screen.width > 0 ? window.innerWidth >= screen.width || window.innerWidth == 0 ? screen.width : window.innerWidth : window.innerWidth;
                        n = e > 1080 ? 144 : e / 7.5;
                        n = n > 32 ? n : 32;
                        document.getElementsByTagName("html")[0].dataset.dpr = i;
                        document.getElementsByTagName("html")[0].style.fontSize = n + "px";
                    }, 500)
                } else {
                    document.getElementsByTagName("html")[0].style.fontSize = n + "px";
                }
            }
            h()
        })(window.NEWAP = window.NEWAP || {});
    </script>

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

[css]  view plain  copy

1. @media screen and (max-width:321px){  
2.     html{font-size:14px;-webkit-text-size-adjust: none;}  
3.     input{font-size:14px;}  
4. }  
5. @media screen and (min-width:322px) and (max-width:639px){  
6.     html{font-size:16px;-webkit-text-size-adjust: none;}  
7.     input{font-size:16px;}  
8. }  
9. @media screen and (min-width:640px) and (max-width:719px){  
10.     html{font-size:20px;-webkit-text-size-adjust: none;}  
11.     input{font-size:20px;}  
12. }  
13. @media screen and (min-width:720px) {  
14.     html{font-size:24px;-webkit-text-size-adjust: none;}  
15.     input{font-size:24px;}  
16. }  

[css]  view plain  copy

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

[css]  view plain  copy

1. 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大神今年初写的文章，获益匪浅。  

[css]  view plain  copy

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

[css]  view plain  copy

1. 然后博主又开始搜索，终于发现 <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上调试是没有问题的。  

[html]  view plain  copy

1. <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="" />  
2. </span>  

[html]  view plain  copy

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

[javascript]  view plain  copy

1. !function(x) {  
2.     function w() {  
3.         var a = r.getBoundingClientRect().width;  
4.         a / v > 540 && (a = 540 * v), x.rem = a / 16, r.style.fontSize = x.rem + "px"  
5.     }  
6.     var v, u, t, s = x.document, r = s.documentElement, q = s.querySelector('meta[name="viewport"]');  
7.     if (q) {  
8.         console.warn("将根据已有的meta标签来设置缩放比例");  
9.         var o = q.getAttribute("content").match(/initial\-scale=(["‘]?)([\d\.]+)\1?/);  
10.         o && (u = parseFloat(o[2]), v = parseInt(1 / u))  
11.     }  
12.     if (!v && !u) {  
13.         var n = (x.navigator.appVersion.match(/android/gi), x.navigator.appVersion.match(/iphone/gi)), v = x.devicePixelRatio;  
14.         v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, u = 1 / v  
15.     }  
16.     if (r.setAttribute("data-dpr", v), !q) {  
17.         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) {  
18.             r.firstElementChild.appendChild(q)  
19.         } else {  
20.             var m = s.createElement("div");  
21.             m.appendChild(q), s.write(m.innerHTML)  
22.         }  
23.     }  
24.     x.dpr = v, x.addEventListener("resize", function() {  
25.         clearTimeout(t), t = setTimeout(w, 300)  
26.     }, !1), x.addEventListener("pageshow", function(b) {  
27.         b.persisted && (clearTimeout(t), t = setTimeout(w, 300))  
28.     }, !1), "complete" === s.readyState ? s.body.style.fontSize = 12 * v + "px" : s.addEventListener("DOMContentLoaded", function() {  
29.         s.body.style.fontSize = 12 * v + "px"  
30.     }, !1), w()  
31. }(window);