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;
}
}