移动端判断横竖屏的方法

发表于 mobile 分类，标签:
11 02月 2020
0

## js

(function() {

    // 是否支持 orientation 属性和事件onorientationchange

    var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object');

     // 检测横竖屏函数

    function getOrientation(){

        var orientation = ''; 

        //  支持 orientation 属性

        if(supportOrientation) {

            // 90,-90竖屏, 其他为横屏

            orientation = /^[-]?90$/igm.test(window.orientation) ? 'landscape' : 'portrait';    

        } else {

            orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';  

        }

        return orientation;

    };

    //  orientation  处理函数

    function handlerOrientation() {

      // 横屏= 'landscape' ; 竖屏 = 'portrait';    

      var orientation = getOrientation();

    };

    // 绑定事件

    window.addEventListener(supportOrientation ? 'orientationchange' : 'resize', handlerOrientation, false); 

})();


## 媒体查询

```

/*横屏*/

@media (orientation: landscape) {

    body {

        background-color: #000;

    }

}

/*竖屏*/

@media (orientation: portrait) {

    body {

        background-color: red;

    }

}

```


0 篇评论

发表我的评论