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);