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

微信默认开启了横屏模式，h5目前无法做到微信浏览器强制竖屏，。
解决思路：
1、布局时就兼容横屏，一般采用flex布局
2、当横屏时给与相应的提示！
CSS判断横屏竖屏：

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

JS判断横屏竖屏：

 

// 移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
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); 

转载于:https://www.cnblogs.com/snowhite/p/9857542.html