竖屏兼容写法

第一次写移动端布局不太熟，所以用了此笨办法~

写在head标签里面
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
/* 兼容iphone4/4s */
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone5/SE */
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone6/7/8 */
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone6/7/8 Plus */
@media (device-height:736px) and (-webkit-min-device-pixel-ratio:3){样式}
/*兼容iphone x*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){样式}
/*兼容Galaxy s5*/
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){样式}
/*兼容Pixel2/2XL*/
@media only screen  and (device-width: 411px) and (-webkit-min-device-pixel-ratio: 3){样式}
/*兼容Nokia N9*/
@media only screen  and (device-width: 480px) and (-webkit-device-pixel-ratio: 1){样式}
/*兼容iPad*/
@media only screen  and (device-width: 768px)  and (-webkit-device-pixel-ratio: 2){样式}
/*兼容w320*h640手机*/
@media only screen  and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 3){样式}

横屏处理

利用js监听手机旋转的角度切换竖屏和横屏css文件
   默认加载竖屏样式
   <link rel="stylesheet" id="css"  href="竖屏样式">
    <script>
        window.addEventListener('orientationchange', function(event){
            if (window.orientation == 180 || window.orientation==0) {
                $("#css").attr("href", "竖屏样式");
            }
            if (window.orientation == 90 || window.orientation == -90) {
                $("#css").attr("href", "横屏样式");
            }
        });
    </script>
或者
/* 兼容iphone4/4s */
@media (device-width:480px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone5/SE */
@media (device-width:568px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone6/7/8 */
@media (device-width:667px) and (-webkit-min-device-pixel-ratio:2){样式}
/* 兼容iphone6/7/8 Plus */
@media (device-width:736px) and (-webkit-min-device-pixel-ratio:3){样式}
/*兼容iphone x*/
@media only screen and (device-height: 375px) and (device-width: 812px) and (-webkit-device-pixel-ratio: 3){样式}
/*兼容Galaxy s5*/
@media screen and (device-height: 360px) and (device-width: 640px) and (-webkit-device-pixel-ratio: 3){样式}
/*兼容Pixel2/2XL*/
@media only screen  and (device-height: 411px) and (-webkit-min-device-pixel-ratio: 3){样式}
/*兼容Nokia N9*/
@media only screen  and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){样式}
/*兼容iPad*/
@media only screen  and (device-height: 768px) and (-webkit-device-pixel-ratio: 2){样式}
/*兼容w320*h640手机*/
@media only screen  and (device-height: 320px) and (-webkit-min-device-pixel-ratio: 3){样式}

user-scalable=no在ios10失效处理

window.onload=function () {  
        document.addEventListener('touchstart',function (event) {  
            if (event.touches.length > 1) {  
                event.preventDefault();  
            }  
        })  
        var lastTouchEnd=0;  
        document.addEventListener('touchend',function (event) {  
            var now=(new Date()).getTime();  
            if (now-lastTouchEnd <= 300) {  
                event.preventDefault();  
            }  
            lastTouchEnd=now;  
        },false)  
    } 

iphone x css的js兼容写法

if ($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3) {
    xxx
}