怎么判断移动端横屏还是竖屏？

怎么判断移动端横屏还是竖屏？

• • 怎么判断移动端横屏还是竖屏？
  • • CSS判断横屏竖屏：
    • JS判断横屏竖屏：

怎么判断移动端横屏还是竖屏？

CSS判断横屏竖屏：

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

@media screen and (orientation: landscape) { 
	/*横屏 css*/ 

}

JS判断横屏竖屏：

 // 移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function () {
      console.log(window.orientation); // 横屏为90 竖屏为0
      if (window.orientation === 180 || window.orientation === 0) {
        console.log('竖屏状态！');
      }
      if (window.orientation === 90 || window.orientation === -90) {
        console.log('横屏状态！');
      }
    }, false);

页面横屏和竖屏的变化如下图：

参考文章：怎么判断移动端横屏还是竖屏