轉帖 移動端h5頁面不同尺寸屏幕適配兼容方法

1. viewport屬性及html頁面結構

 

1.  
   <meta name= "viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2.  
   // width 設置viewport寬度，為一個正整數，或字符串‘device-width’
3.  
   // height 設置viewport高度，一般設置了寬度，會自動解析出高度，可以不用設置
4.  
   // initial-scale 默認縮放比例，為一個數字，可以帶小數
5.  
   // minimum-scale 允許用戶最小縮放比例，為一個數字，可以帶小數
6.  
   // maximum-scale 允許用戶最大縮放比例，為一個數字，可以帶小數
7.  
   // user-scalable 是否允許手動縮放

 

需要在每一個頁面頭都加上這句話。這里面關於maximun-scale的取值網上有幾種不同說法。有人建議用1.3，公司這邊用的1.5。可能是我沒有理解什么是允許用戶最大縮放比例吧，博主放到真機上測試發現1.0，1.3，1.5沒有什么區別。下面po一個網上建議用1.3的理由吧：

為什么是1.3？

目前大部分頁面都是以320px為基准的布局，而iphone6的寬度比是375/320 = 1.171875，iphone6+則是 414/320 = 1.29375那么以1.29倍也就約等於1.3了。

 

2. 屏幕自適應（賊好用的絕招）

 

<script>
    (function (doc, win) {
        var docEl = doc.documentElement;
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    }(document,window));

</script>

 

 

3. iphone4/iphone5/iphone6/iphone6p 的css media query

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */

    .class{}

}


@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */

    .class{}

}

@media(min-device-width:375px)and(max-device-width:667px)and(-webkit-min-device-pixel-ratio:2){


/*iphone6*/


}


@media(min-device-width:414px)and(max-device-width:736px)and(-webkit-min-device-pixel-ratio:3){


/*iphone6plus*/


}