在手机端,当用户将手机转屏的时候,你制作的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段判断当前城市