video-07-js/css竖屏横屏判断方法

非常奇葩,我们要做适配,有时候还需要考虑是横屏,还是竖屏,做样式兼容!!

 下面将介绍两种适配方法

目录

一、css

二、js


一、css

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

二、js

window.onload = function(){ //初次加载
	isD();
}
window.addEventListener("resize", function(){ //屏幕宽度发生变化
    isD();
});
function isD(){
	if (window.orientation === 180 || window.orientation === 0) { 
      // 正常方向或屏幕旋转180度
        console.log('竖屏');
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
       // 屏幕顺时钟旋转90度或屏幕逆时针旋转90度
        console.log('横屏');
    }  
}

猜你喜欢

转载自blog.csdn.net/qq_59747594/article/details/131484856