使用JS判断移动端手机横竖屏状态

介绍如何使用JS判断移动端手机横竖屏状态。

概述

在移动端开发中，随着设备各种尺寸的增多，为了更好的适配不同的屏幕尺寸，我们需要获取设备的横竖屏状态来适配不同的布局逻辑。这时候，使用JS可以获得设备的横竖屏状态，并根据不同的状态来做相应的处理。

方法

1. 使用window.matchMedia函数

window.matchMedia函数可以检测设备的横竖屏状态，并返回一个MediaQueryList对象。

const mediaQueryList = window.matchMedia('(orientation: portrait)');

注意，参数中的 'orientation' 可以是 'portrait' 或 'landscape'。然后我们可以通过监听 mediaQueryList.addListener 监听横竖屏状态变化：

mediaQueryList.addListener(function(mql){
    if(mql.matches){
        console.log('竖屏');
        // 竖屏时的处理逻辑
    }else{
        console.log('横屏');
        // 横屏时的处理逻辑
    }
});

1. 使用 window.orientation 属性

window.orientation属性可以返回设备的方向，如果设备处于竖屏状态，值为0，如果为横屏状态，则值为90或-90。

const orientation = window.orientation;
if (orientation === 0) {
  console.log('竖屏');
  // 竖屏时的处理逻辑
} else if (orientation === 90 || orientation === -90) {
  console.log('横屏');
  // 横屏时的处理逻辑
}

示例说明

1. 使用 window.matchMedia 函数

const mediaQueryList = window.matchMedia('(orientation: portrait)');

mediaQueryList.addListener(function(mql){
    if(mql.matches){
        console.log('竖屏');
        // 竖屏时的处理逻辑
    }else{
        console.log('横屏');
        // 横屏时的处理逻辑
    }
});

在页面加载时，媒体查询条件会被检测一次，并在横竖屏状态发生改变时自动触发回调函数。在控制台查看输出，即可看到设备的当前横竖屏状态。

1. 使用 window.orientation 属性

const orientation = window.orientation;
if (orientation === 0) {
  console.log('竖屏');
  // 竖屏时的处理逻辑
} else if (orientation === 90 || orientation === -90) {
  console.log('横屏');
  // 横屏时的处理逻辑
}

在页面加载时，通过 window.orientation 获取设备的横竖屏状态，然后根据不同状态进行不同处理逻辑，方便实现页面的自适应适配。

结论

通过以上两种方法，我们可以很方便的判断手机的横竖屏状态，并在不同的状态下做出不同处理，保证页面的布局在各种设备上都得到良好的呈现。