js检测横屏竖屏

在JavaScript中检测横屏（Landscape）和竖屏（Portrait）主要依赖于window.orientation属性或者监听resize事件结合window.innerWidth和window.innerHeight的值。以下是相关基础概念及实现方法：

基础概念

1. window.orientation：这是一个只读属性，表示设备的物理方向。其值可以是0（竖屏）、90或-90（横屏）、180（倒置竖屏）。
2. resize事件：当浏览器窗口大小发生变化时触发，可以用来检测屏幕方向的变化。

实现方法

方法一：使用window.orientation

function checkScreenOrientation() {
    const orientation = window.orientation;
    if (orientation === 0 || orientation === 180) {
        console.log('当前为竖屏');
    } else if (orientation === 90 || orientation === -90) {
        console.log('当前为横屏');
    }
}

// 监听屏幕方向变化
window.addEventListener('orientationchange', checkScreenOrientation);

// 初始化时检查一次
checkScreenOrientation();

方法二：使用resize事件

function checkScreenOrientation() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    if (width > height) {
        console.log('当前为横屏');
    } else {
        console.log('当前为竖屏');
    }
}

// 监听窗口大小变化
window.addEventListener('resize', checkScreenOrientation);

// 初始化时检查一次
checkScreenOrientation();

优势

• 实时性：能够实时检测屏幕方向的变化。
• 兼容性：大多数现代浏览器都支持上述方法。

应用场景

• 响应式设计：根据屏幕方向调整布局。
• 游戏开发：根据屏幕方向优化游戏体验。
• 多媒体播放：根据屏幕方向调整视频播放器的尺寸和方向。

可能遇到的问题及解决方法

1. 兼容性问题：部分旧版浏览器可能不支持window.orientation属性。可以通过检测window.screen.orientation作为替代方案。
2. 兼容性问题：部分旧版浏览器可能不支持window.orientation属性。可以通过检测window.screen.orientation作为替代方案。
3. 频繁触发resize事件：在屏幕方向变化时，resize事件可能会频繁触发，可以通过节流（throttle）或防抖（debounce）技术来优化性能。
4. 频繁触发resize事件：在屏幕方向变化时，resize事件可能会频繁触发，可以通过节流（throttle）或防抖（debounce）技术来优化性能。

通过以上方法，可以有效地检测和处理屏幕方向的变化，提升用户体验。