JS如何检测屏幕旋转角度 3种设备方向检测方案适配横竖屏-js教程-PHP中文网

JS如何检测屏幕旋转角度 3种设备方向检测方案适配横竖屏

冰火之心

发布： 2025-06-13 12:24:01

原创

972人浏览过

屏幕旋转角度检测可通过三种方案实现并兼容处理1.screen.orientation api为现代浏览器推荐方案可获取具体角度和类型但兼容性差2.window.orientation适用于老旧移动端设备返回方向值但已被废弃3.window.matchmedia通过媒体查询判断横竖屏适合响应式设计但无法获取具体角度兼容性问题可通过优先级选择处理先尝试screen.orientation不支持则window.orientation最后window.matchmedia同时resize事件频繁触发时可用debounce或throttle优化在react中可用useeffect监听事件vue则用生命周期钩子添加移除监听确保组件响应旋转变化。

JS如何检测屏幕旋转角度 3种设备方向检测方案适配横竖屏

屏幕旋转角度检测，本质上是为了适配不同设备方向，让你的JS应用在横竖屏切换时都能流畅运行。有几种方案可以实现，选择哪个取决于你的具体需求和兼容性考量。

解决方案

screen.orientation API (现代浏览器推荐)

这是最现代、最直接的方式。screen.orientation对象提供了当前屏幕的旋转角度和类型。

function handleOrientationChange() {
  console.log("Orientation: " + screen.orientation.type);
  console.log("Angle: " + screen.orientation.angle);
  // 根据角度和类型调整你的UI
}

screen.orientation.addEventListener("change", handleOrientationChange);

// 初始调用
handleOrientationChange();

登录后复制

优点: 简洁、易用、语义化。
缺点: 兼容性问题。老旧浏览器不支持。

window.orientation (移动端老版本浏览器)

这个属性在移动端老版本浏览器中使用较多，但已逐渐被screen.orientation取代。它返回一个表示屏幕方向的值：
- 0: 正常方向 (竖屏)
- 90: 顺时针旋转90度 (横屏)
- 180: 旋转180度 (倒立)
- -90: 逆时针旋转90度 (横屏)
```
function handleOrientationChange() {
  const orientation = window.orientation;
  console.log("Orientation: " + orientation);
  // 根据orientation调整你的UI
}

window.addEventListener("orientationchange", handleOrientationChange);

// 初始调用
handleOrientationChange();
```
登录后复制
- 优点: 兼容性相对较好，尤其是在一些老旧的移动设备上。
- 缺点: 已被废弃，未来可能不再支持。

window.matchMedia (响应式设计)

这种方法不直接检测角度，而是通过CSS媒体查询来判断屏幕的宽高比，从而推断出横竖屏状态。

function handleOrientationChange() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    console.log("Portrait mode");
    // 竖屏模式
  } else if (window.matchMedia("(orientation: landscape)").matches) {
    console.log("Landscape mode");
    // 横屏模式
  }
}

window.addEventListener("resize", handleOrientationChange); // 注意这里是resize事件

// 初始调用
handleOrientationChange();

登录后复制

优点: 适用于响应式设计，可以更灵活地控制不同方向下的样式。
缺点: 无法直接获取旋转角度，只能判断横竖屏。resize事件可能会频繁触发，需要注意性能优化。

如何处理不同浏览器的兼容性问题？

优雅降级，是王道。先尝试screen.orientation，如果不支持，再尝试window.orientation，最后使用window.matchMedia作为兜底方案。

function getOrientation() {
  if (screen.orientation && screen.orientation.type) {
    return screen.orientation.type;
  } else if (window.orientation !== undefined) {
    return window.orientation;
  } else if (window.matchMedia("(orientation: portrait)").matches) {
    return "portrait";
  } else if (window.matchMedia("(orientation: landscape)").matches) {
    return "landscape";
  } else {
    return "unknown";
  }
}

function handleOrientationChange() {
  const orientation = getOrientation();
  console.log("Orientation: " + orientation);
  // 根据orientation调整你的UI
}

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

handleOrientationChange();

登录后复制

为什么 resize 事件在某些情况下会频繁触发？如何优化？

resize事件会在窗口大小改变时触发，包括横竖屏切换，以及浏览器窗口大小调整等。频繁触发会导致性能问题。

Debouncing: 使用 debounce 函数，限制事件处理函数的执行频率。

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

const debouncedHandleOrientationChange = debounce(handleOrientationChange, 250); // 250ms延迟

window.addEventListener("resize", debouncedHandleOrientationChange);

登录后复制

Throttling: 使用 throttle 函数，确保事件处理函数在固定的时间间隔内最多执行一次。

function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
    const context = this;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit) {
          func.apply(context, args);
          lastRan = Date.now();
        }
      }, limit - (Date.now() - lastRan));
    }
  };
}

const throttledHandleOrientationChange = throttle(handleOrientationChange, 250); // 250ms间隔

window.addEventListener("resize", throttledHandleOrientationChange);

登录后复制

如何在React或Vue等框架中使用屏幕旋转检测？

在React中，可以使用useEffect hook来监听屏幕旋转事件。

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

function MyComponent() {
  const [orientation, setOrientation] = useState(getOrientation());

  useEffect(() => {
    function handleOrientationChange() {
      setOrientation(getOrientation());
    }

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

    return () => {
      window.removeEventListener("orientationchange", handleOrientationChange);
      window.removeEventListener("resize", handleOrientationChange);
    };
  }, []);

  function getOrientation() {
      // 兼容性代码 (同上)
      if (screen.orientation && screen.orientation.type) {
        return screen.orientation.type;
      } else if (window.orientation !== undefined) {
        return window.orientation;
      } else if (window.matchMedia("(orientation: portrait)").matches) {
        return "portrait";
      } else if (window.matchMedia("(orientation: landscape)").matches) {
        return "landscape";
      } else {
        return "unknown";
      }
    }

  return (
    <div>
      <p>Orientation: {orientation}</p>
      {/* 根据orientation渲染不同的UI */}
    </div>
  );
}

export default MyComponent;

登录后复制

Vue中的实现类似，使用mounted和beforeDestroy生命周期钩子来添加和移除事件监听器。

总结：选择合适的屏幕旋转检测方案，并做好兼容性处理，是保证你的JS应用在不同设备和浏览器上都能正常运行的关键。别忘了优化resize事件的处理，避免性能问题。