前端常用检测代码

1.横屏适配

JavaScript检测横屏

window.orientation:获取屏幕旋转方向

   window.addEventListener('resize',() => {
       if(window.orientation === 180 || window.orientation === 0){
           console.log('竖屏');
       };
       if(window.orientation === 90 || window.orientation === -90){
           console.log('横屏');
       }
   })

CSS检测横屏

@media screen and (orientation: portrait) {
  /*竖屏...*/
} 
@media screen and (orientation: landscape) {
  /*横屏...*/
}

media查询

• 使用media查询判断不同的设备像素比来显示不同精度的图:

   .avatar{
            background-image: url(conardLi_1x.png);
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .avatar{
                background-image: url(conardLi_2x.png);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .avatar{
                background-image: url(conardLi_3x.png);
            }
        }

js检测是pc屏幕还是移动屏幕

   <script>
        try {
            if (!window.location.hash.match("fromapp")) {
                if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad|Nokia|SymbianOS|Windows Phone|Linux armv71|WindowsCE|BlackBerry|IEMobile|Nexus10|Nexus4|Nexus5|Nexus5X|Nexu6|Nexus6p|Nexus7|Nokia Lunia520|Nokia N9|iPad Mini|iphone4|Galaxy S5|pixel2|pixel 2 XL|iPhone X)/i))) {
                    window.location = "http://m.xxx.com/xxx.html";
    
                }
            }
        }
        catch (err) {
            console.log(404);
        }
    </script>