移动端监听横屏竖屏

css媒体查询

/*横屏*/
@media (orientation:landscape) { }

/*竖屏*/
@media (orientation:portrait){ }

js通过H5新特性 orientationchange 事件判断是否横屏

window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
  if (window.orientation === 180 || window.orientation === 0) { 
    alert('竖屏状态');
  } 
  if(window.orientation==90||window.orientation==-90){
    alert("横屏状态");
  }
}, false);