能者 发表于 2023-9-24 13:00:01

使用JavaScript检测设备的横竖屏状态

要使用JavaScript检测设备的横竖屏状态,可以使用`window.orientation`属性或`window.matchMedia()`方法。

1. 使用`window.orientation`属性:
function checkOrientation() {
if (window.orientation === 0 || window.orientation === 180) {
    // 竖屏状态
    console.log("设备处于竖屏状态");
} else if (window.orientation === 90 || window.orientation === -90) {
    // 横屏状态
    console.log("设备处于横屏状态");
}
}

// 当设备的屏幕方向改变时触发
window.addEventListener("orientationchange", function () {
checkOrientation();
});

// 页面加载完成时检查一次屏幕方向
checkOrientation();


2. 使用`window.matchMedia()`方法:
function checkOrientation() {
if (window.matchMedia("(orientation: portrait)").matches) {
    // 竖屏状态
    console.log("设备处于竖屏状态");
} else if (window.matchMedia("(orientation: landscape)").matches) {
    // 横屏状态
    console.log("设备处于横屏状态");
}
}

// 当设备的屏幕方向改变时触发
window.addEventListener("orientationchange", function () {
checkOrientation();
});

// 页面加载完成时检查一次屏幕方向
checkOrientation();


以上代码中,`checkOrientation()`函数用于检测设备的横竖屏状态。通过判断`window.orientation`属性的值或使用`window.matchMedia()`方法来匹配媒体查询字符串`(orientation: portrait)`和`(orientation: landscape)`,以确定设备的方向。在屏幕方向改变时,通过监听`orientationchange`事件来触发检测函数,并在页面加载完成后立即检查一次屏幕方向。

页: [1]
查看完整版本: 使用JavaScript检测设备的横竖屏状态