在 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;
解释
- useState:
- 创建一个状态变量 isLandscape,用于存储当前屏幕方向。
- handleOrientationChange:
- 定义一个函数,用于更新屏幕方向状态。
- useEffect:
- 在组件挂载时添加 orientationchange 和 resize 事件监听器。
- 在组件卸载时清理事件监听器。