监听移动端横竖屏状态

1. css样式

@media all and (orientation: portrait) {
  竖屏
}
@media all and (orientation: landscape) {
  横屏
}

pad端横屏 @media only screen and (max-width: 1200px) and (orientation: landscape) {}
pad端竖屏 @media only screen and (max-width: 1200px) and (orientation: portrait) {}

2. 浏览器自带事件orientationchange

window.addEventListener('orientationchange',this.renderResize,false)

renderResize() {
   if (window.orientation === 90 || window.orientation === -90) { 
     this.pageNum = 6  pad横屏
   } else if (window.orientation === 0 || window.orientation === 180) {
     this.pageNum = 10  pad竖屏
   }
 }

3. 判断页面宽高

let width = window.innerWidth || document.documentElement.clientWidth
let height = window.innerHeight || document.documentElement.clientHeight
width > height ? 'landscape': 'portrait'