H5横竖屏检测的方法

前言

在移动端网页开发中，横竖屏的适配是一个非常重要的问题。在移动设备上，用户可能会频繁改变设备的方向，因此需要在网页中能够检测设备的横竖屏状态，并做出相应的适配。本文将介绍几种常见的方法来检测H5页面的横竖屏状态。

方法一：使用window.orientation

在移动设备上，我们可以通过window对象的orientation属性来获取当前设备的方向。

<script>
    function detectOrientation() {
        var orientation = window.orientation;
        if (orientation === 0 || orientation === 180) {
            // 竖屏
            console.log("当前为竖屏模式");
        } else if (orientation === 90 || orientation === -90) {
            // 横屏
            console.log("当前为横屏模式");
        }
    }
        
    // 监听屏幕方向变化
    window.addEventListener("orientationchange", detectOrientation);
</script>

方法二：使用媒体查询

除了使用JavaScript来检测方向外，我们还可以使用CSS的媒体查询来判断设备的横竖屏状态。

<style>
    /* 竖屏样式 */
    @media screen and (orientation: portrait) {
        body {
            background-color: #fff;
            color: #000;
        }
    }
    
    /* 横屏样式 */
    @media screen and (orientation: landscape) {
        body {
            background-color: #000;
            color: #fff;
        }
    }
</style>

方法三：使用window.matchMedia

window.matchMedia()方法可以用来监听媒体查询的变化，我们可以结合媒体查询和JavaScript来检测横竖屏状态。

<script>
    // 创建一个媒体查询对象
    var mediaQuery = window.matchMedia("(orientation: portrait)");
    
    // 媒体查询变化时的回调函数
    function handleOrientationChange(event) {
        if (event.matches) {
            // 竖屏
            console.log("当前为竖屏模式");
        } else {
            // 横屏
            console.log("当前为横屏模式");
        }
    }
    
    // 监听媒体查询变化
    mediaQuery.addListener(handleOrientationChange);
    
    // 初始化时调用一次回调函数，获取当前屏幕方向
    handleOrientationChange(mediaQuery);
</script>

方法四：使用设备方向传感器

在一些高级的移动设备上，我们可以通过设备方向传感器来获取设备的方向信息，并根据方向信息进行横竖屏适配。

详细的设备方向传感器的使用方法超出本文的范围，但简单来说，可以通过JavaScript的DeviceOrientationEvent事件来监听设备方向变化，进而判断横竖屏状态。

总结：

本文介绍了四种常见的方法来检测H5页面的横竖屏状态，分别是使用window.orientation、CSS媒体查询、window.matchMedia和设备方向传感器。根据项目需求和设备支持情况，选择合适的方法来进行横竖屏适配。