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

在使用后页面的时候某些场景下需要我们要到 landscape（横屏）和portrait（竖屏）
获取是否是竖屏

const findMedia =  window.matchMedia("(orientation: portrait)") // 会得到查询出来的结果是否是竖屏 返回一个MediaQueryList对象
/*
{
matches: false // 查询的结果
media: "(orientation: portrait)" // 查询的类型
onchange: null  //监听的函数 可以监听变化
}
*/

通过 findMedia.matches的知道是不是不是竖屏

const onMatchMediaChange = (findMedia) => {
    if(mql.matches){
        //竖屏
        console.log('此时竖屏')
    }else{
        //横屏
        console.log('此时横屏')
    }
}
// 输出当前屏幕模式
onMatchMediaChange(findMedia);
 
// 监听屏幕模式变化
findMedia.addListener(onMatchMediaChange)
// 移除监听
findMedia.removeListener(onMatchMediaChange);