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>