横竖屏检测 orientation resize matchMedia

最近有人提需求，产品要适配横竖屏，这就使人头秃了呀。

这在家办公也不让闲着点。虽说需求提出来了，可是咱们身为一个前端er，仍是要有本身的想法呀，咱们要统计一波数据看看到底有多少人在横屏使用咱们的产品。

demo测试地址

方案一：orientation

window.addEventListener("orientationchange", function(event) {
    // 等于0或者180竖屏
    // 等于90或者-90度横屏
    _this.eventValue = event.orientation || 
        (screen.orientation && screen.orientation.angle)
}, false);

1. 经过 orientationchange 事件来监听横竖屏的变化
2. 经过 orientation 来获取当前屏幕的方向角度
3. 兼容性比较差，https://www.caniuse.com/#sear...

方案二：resize判断宽高

基于上个方案的兼容性，那么咱们搞个兼容性好一点的。

window.addEventListener("resize", function(event) {
    _this.innerWidth = window.innerWidth
    _this.innerHeight = window.innerHeight
}, false);

1. 经过 resize 事件来监听浏览器的宽高变化
2. 经过比对宽高来判断当前横竖屏状态。
3. 由于是移动端，因此键盘弹出的时候也会干扰。
4. 兼容性固然是棒棒的。

方案三：matchMedia 媒体查询

matchMedia 是什么？

matchMedia() 能够解析任何一个 CSS @media 的特性，如 min-height, min-width, orientation 等。

matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。

MediaQueryList 对象有如下两个属性：

• media：当前查询的内容，也就是你传入的内容。
• matches：检测查询结果，若是匹配，则值为 true，不然为 false。

如何使用

var mediaQueryList = window
    .matchMedia("screen and (orientation: portrait)");
if(window.mediaQueryList && mediaQueryList.addListener){
    mediaQueryList.addListener(function(){
        _this.matchMediaAddEvent = 
            mediaQueryList.matches?'竖屏':'横屏'
    })
}

方案四：媒体查询

看到这个方案你是否是满头问号。这个方案和上个不同吗？

哈哈，这个方案是我在网上看到的，有多是那我的不知道 matchMedia 这个 API。或者是 API 有兼容性问题，他本身搞了一个 hack 方法。

原理也是依赖css的媒体查询。只不过他经过定时比对样式来判断当前状态。

微信公众号：前端linong