JavaScript&CSS检测手机横竖屏

window.orientation:获取屏幕旋转方向

window.addEventListener("resize", ()=>{
    if (window.orientation === 180 || window.orientation === 0) { 
      // 正常方向或屏幕旋转180度
        console.log('竖屏');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log('横屏');
    }  
});

CSS检测横屏

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

当点击输入框下方输入键盘弹起时，上面的css检测横屏可能会失效，不妨试试这个

@media screen and (min-aspect-ratio: 13/9){ // landscape 横屏
	.tips {
		display:flex;
	}
}

@media screen and (max-aspect-ratio: 13/9){ // portrait 竖屏
	.tips{
		display: none;
	}
}