1.js监测移动设备横竖屏

这个适用于要切换横竖屏的页面,比如视频播放,游戏娱乐等业务场景。

1
2
3
4
5
6
7
8
window.addEventListener('resize', () => {
if (window.orientation === 180 || window.orientation === 0) {
console.log('竖屏');
}
if (window.orientation === 90 || window.orientation === -90) {
console.log('横屏');
}
})

2.css媒体查询监测横竖屏

1
2
3
4
5
6
7
8
9
10
@media screen and (orientation: portrait) {
#box {
color: #333;
}
}
@media screen and (orientation: landscape) {
#box {
color: #f00;
}
}
1
<div id="box">box</div>