html5 判断横竖屏,前端js横竖屏检测的4种方案

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

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

方案一：orientation

window.addEventListener("orientationchange", function(event) {

// 等于0或者180竖屏

// 等于90或者-90度横屏

_this.eventValue = event.orientation ||

(screen.orientation && screen.orientation.angle)

}, false);

通过 orientationchange 事件来监听横竖屏的变化

通过 orientation 来获取当前屏幕的方向角度

方案二：resize判断宽高

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

window.addEventListener("resize", function(event) {

_this.innerWidth = window.innerWidth

_this.innerHeight = window.innerHeight

}, false);

通过 resize 事件来监听浏览器的宽高变化

通过比对宽高来判断当前横竖屏状态。

因为是移动端，所以键盘弹出的时候也会干扰。

兼容性当然是棒棒的。

方案三：matchMedia 媒体查询

<