js监测移动设备横竖屏

Mark in HangZhou

2019-06-06

js
check

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

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

window.addEventListener('resize', () => {
  if (window.orientation === 180 || window.orientation === 0) {
    console.log('竖屏');
  }
  if (window.orientation === 90 || window.orientation === -90) {
    console.log('横屏');
  }
})

1
2
3
4
5
6
7
8

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

@media screen and (orientation: portrait) {
  #box {
    color: #333;
  }
}
@media screen and (orientation: landscape) {
  #box {
    color: #f00;
  }
}

1
2
3
4
5
6
7
8
9
10

<div id="box">box</div>

本文永久链接是：

如需转载，请注明《》转自，原作者