JS与CSS实现移动端横竖屏检测的三种方案

基于orientationchange事件的检测

第一种方法是通过触发手机在横屏和竖屏之间切换时的事件来实现检测。

window.addEventListener("orientationchange", function() {
// 输出当前屏幕方向的角度值
alert(window.orientation);
}, false);

基于resize事件的尺寸监听

第二种方法是监听窗口大小调整事件。

window.addEventListener("resize", function() {
// 获取屏幕尺寸信息（包括内部和外部宽度、高度）
}, false);

CSS媒体查询与matchMedia实时判断

利用CSS样式来区分横竖屏显示效果。

/* 竖屏样式 */
@media screen and (orientation:portrait) {
/* 竖屏专属样式 */
}
/* 横屏样式 */
@media screen and (orientation:landscape) {
/* 横屏专属样式 */
}

现代浏览器中的window.matchMedia方法支持实时媒体查询。我们可以借助上述媒体查询条件来判断当前设备处于直立还是水平视角：

var mql = window.matchMedia("(orientation: portrait)");
// 如果匹配成功，说明当前处于垂直视角
if(mql.matches) {
// 处理直立方向逻辑
alert("1")
} else {
// 处理水平方向逻辑
alert("2")
} 
// 注册媒体查询变更监听器
mql.addListener(function(m) {
if(m.matches) {
// 方向切换为直立时的处理
document.getElementById("test").innerHTML="改变到直立方向";
}
} else {
document.getElementById("test").innerHTML="改变到水平方向";
// 方向切换为水平时的处理
}
});