H5判断当前移动端是横屏还是竖屏的方法汇总

在 H5 页面中，可以通过以下几种方法判断当前设备是横屏还是竖屏：

方法一：使用 window.orientation

window.orientation 属性返回当前设备的旋转角度。常见的值有：

• 0 或 180 表示竖屏
• 90 或 -90 表示横屏

function isLandscape() {
  return window.orientation === 90 || window.orientation === -90;
}

if (isLandscape()) {
  console.log('当前是横屏');
} else {
  console.log('当前是竖屏');
}

方法二：使用 window.matchMedia

window.matchMedia 方法可以用来检测媒体查询的结果。你可以使用媒体查询来判断设备的方向。

function isLandscape() {
  return window.matchMedia("(orientation: landscape)").matches;
}

if (isLandscape()) {
  console.log('当前是横屏');
} else {
  console.log('当前是竖屏');
}

方法三：使用 screen.orientation

screen.orientation 属性返回一个包含屏幕方向信息的对象。你可以通过 screen.orientation.type 来判断当前的屏幕方向。

function isLandscape() {
  return screen.orientation.type.startsWith('landscape');
}

if (isLandscape()) {
  console.log('当前是横屏');
} else {
  console.log('当前是竖屏');
}

方法一、二和三可以结合监听屏幕方向变化

你还可以监听屏幕方向的变化，以便在用户旋转设备时执行相应的操作。

function handleOrientationChange() {
  if (isLandscape()) {
    console.log('当前是横屏');
  } else {
    console.log('当前是竖屏');
  }
}

window.addEventListener('orientationchange', handleOrientationChange);
window.addEventListener('resize', handleOrientationChange);

// 初始判断
handleOrientationChange();

方法四：在主流的移动端设备是高大于宽情况下，监听根元素的宽高严格等于屏幕可视区宽高的元素，可以通过宽高大小或比例来判断是横屏还是竖屏。（这个可能没那么准确，但是也适合现时的手机终端，仅供参考）

这里使用 ahooks 库的 useSize 实现对元素的宽高监听

import { useSize } from "ahooks";
import { useEffect, useRef } from "react";

/**
 * 在主流的移动端设备是高大于宽情况下，监听根元素的宽高严格等于屏幕可视区宽高的元素，可以通过宽高大小或比例来判断是横屏还是竖屏
 * @returns
 */
const MyComponent = () => {
  const ref = useRef<HTMLDivElement>(null);
  const containerSize = useSize(ref);

  useEffect(() => {
    // 如果宽度大于高度，就表示是在横屏状态
    if ((containerSize?.width ?? 0) > (containerSize?.height ?? 1)) {
      console.log("横屏状态");
    } else {
      console.log("竖屏状态");
    }
  }, [containerSize?.height, containerSize?.width]);

  return (
    <div
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%",
      }}
      ref={ref}
    >
      你的内容
    </div>
  );
};

export default MyComponent;

综合示例

以下是一个综合示例，展示如何在 React 应用中判断和监听屏幕方向的变化：

import React, { useEffect, useState } from 'react';

const OrientationChecker = () => {
  const [isLandscape, setIsLandscape] = useState(window.matchMedia("(orientation: landscape)").matches);

  const handleOrientationChange = () => {
    setIsLandscape(window.matchMedia("(orientation: landscape)").matches);
  };

  useEffect(() => {
    window.addEventListener('orientationchange', handleOrientationChange);
    window.addEventListener('resize', handleOrientationChange);

    // 清理事件监听器
    return () => {
      window.removeEventListener('orientationchange', handleOrientationChange);
      window.removeEventListener('resize', handleOrientationChange);
    };
  }, []);

  return (
    <div>
      {isLandscape ? '当前是横屏' : '当前是竖屏'}
    </div>
  );
};

export default OrientationChecker;

解释

1. useState:
   • 创建一个状态变量 isLandscape，用于存储当前屏幕方向。
2. handleOrientationChange:
   • 定义一个函数，用于更新屏幕方向状态。
3. useEffect:
   • 在组件挂载时添加 orientationchange 和 resize 事件监听器。
   • 在组件卸载时清理事件监听器。

通过这些方法，你可以在 H5 页面中判断当前是横屏还是竖屏，并在屏幕方向变化时执行相应的操作。