js/css竖屏横屏判断方法

在手机端，当用户将手机转屏的时候，你制作的HTML的页面能被转屏后支持吗？估计很多开发者想兼容，却被卡在了转屏检测，也就是横屏竖屏判断这个环节，怎么知道用户此时的手机设备屏幕是横屏状态还是竖屏状态？

今天就来整理一下js和css判断竖屏还是横屏的方法

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('横屏');
    }  
}

相关知识点：

js根据ip段判断当前城市

版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。

转载请注明来源： js/css竖屏横屏判断方法 - Qui-Note