横屏适配

JavaScript检测横屏

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检测横屏

@mediascreen and (orientation:portrait){
/*竖屏...*/
}

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