JS获取设备横竖屏幕方向并监听变化

先上完整代码：

var mql = window.matchMedia(\'(orientation: portrait)\');
console.log(mql);
function onMatchMediaChange(mql){
    if(mql.matches){
        //竖屏
        console.log(\'此时竖屏\')
    }else{
        //横屏
        console.log(\'此时横屏\')
    }
}
// 输出当前屏幕模式
onMatchMediaChange(mql);

// 监听屏幕模式变化
mql.addListener(onMatchMediaChange);

解析问题：

1.移动设备的两个方向： landscape（横屏）和portrait（竖屏）；

2.js提供的方法 ：MediaQueryList

3.使用方法：

3.1 获取当前设备是否是竖屏（portrait）状态

var mql = window.matchMedia(\"(orientation: portrait)\");

3.2 打印mql，得到MediaQueryList对象如下：

3.3 可以通过访问对象的 matches 属性来查看查询结果：

if(mql.matches){
    //竖屏
    console.log(\'此时竖屏\')
}else{
    //横屏
    console.log(\'此时横屏\')
}

3.4 监听屏幕方向变化，可以通过 MediaQueryList 对象的 addListener 方法来订阅事件，如下

function onMatchMediaChange(mql){
    if(mql.matches){
        //竖屏
        console.log(\'此时竖屏\')
    }else{
        //横屏
        console.log(\'此时横屏\')
    }
}
// 输出当前屏幕模式
onMatchMediaChange(mql);

// 监听屏幕模式变化
mql.addListener(onMatchMediaChange);

3.5 移除监控方法如下：

mql.removeListener(onMatchMediaChange);