本文介绍了在Web开发中检测移动设备屏幕方向变化的三种常用方法。首先通过监听orientationchange事件获取window.orientation值；其次利用resize事件监听屏幕尺寸变化；最后结合CSS媒体查询与window.matchMedia API实现实时状态判断及监听器绑定，帮助开发者灵活适配横竖屏布局。
基于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="改变到水平方向";
// 方向切换为水平时的处理
}
});