JS搞定屏幕旋转检测，轻松应对横竖屏适配的3种技巧

在移动Web开发中，**JS实现屏幕旋转检测**至关重要，它能帮助开发者轻松搞定横竖屏适配，提升用户体验。本文提供了三种主流方案，并针对不同浏览器的兼容性问题给出了解决方案。首先推荐使用现代浏览器提供的`screen.orientation API`，它可以获取屏幕旋转的具体角度和类型。对于老旧设备，`window.orientation`属性仍然有效，但已被废弃。此外，`window.matchMedia`通过媒体查询判断横竖屏，更适合响应式设计。针对`resize`事件频繁触发的问题，可采用`debounce`或`throttle`技术进行优化。文章还详细介绍了如何在React和Vue等框架中实现屏幕旋转检测，确保你的应用在各种场景下都能完美呈现。掌握这些方法，让你的Web应用在横竖屏之间自由切换，为用户带来更流畅的操作体验！

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

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

解决方案

1. 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();

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

2. 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();

   • 优点: 兼容性相对较好，尤其是在一些老旧的移动设备上。
   • 缺点: 已被废弃，未来可能不再支持。

3. 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事件的处理，避免性能问题。

文中关于兼容性处理,resize事件,屏幕旋转检测,screen.orientation,window.matchMedia的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS搞定屏幕旋转检测，轻松应对横竖屏适配的3种技巧》文章吧，也可关注golang学习网公众号了解相关技术文章。