JS检测手机横竖屏的3种方法

有志者，事竟成！如果你在学习文章，那么本文《JS检测移动端横竖屏的3种方法！》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

检测移动端横竖屏的核心方法有三种：使用 screen.orientation API、matchMedia 查询以及监听 orientationchange 或 resize 事件。1. screen.orientation API 提供了详细的方向类型信息，如 portrait-primary 和 landscape-primary，但兼容性较差；2. matchMedia 方法通过 CSS media queries 检测屏幕方向，适用于响应式设计；3. 监听 orientationchange 事件可精准捕捉方向变化，而 resize 事件需节流处理以优化性能。为提升兼容性，建议结合特性检测与 fallback 方案，优先使用 screen.orientation，不支持时回退至 matchMedia 或 window.innerWidth/innerHeight 判断，并同时监听 orientationchange 和 resize 事件以覆盖更多浏览器环境。

检测 JavaScript 中的移动端横竖屏，核心在于监听 orientationchange 事件或者使用 matchMedia 查询。前者更直接，后者在某些情况下更灵活。

检测屏幕方向，这三种技巧各有千秋，看你的具体需求了。

为什么需要检测屏幕方向？

移动设备横竖屏切换是很常见的用户行为，针对不同的屏幕方向进行适配，可以极大地提升用户体验。例如，在横屏模式下，可以展示更多的内容，或者调整布局以适应更宽的屏幕。如果你的网站或应用对屏幕方向不敏感，用户可能会感到不便，影响留存率。

有几种方法可以实现这个目标。最常见的是使用 window.orientation 属性，但这已经被弃用了。取而代之的是使用 screen.orientation API 或者 matchMedia 查询。screen.orientation 提供了更详细的方向信息，例如 portrait-primary、portrait-secondary、landscape-primary 和 landscape-secondary。matchMedia 则允许你根据 CSS media queries 来检测屏幕方向，这在响应式设计中非常有用。

下面是一个使用 matchMedia 的例子：

function detectOrientation() {
  if (window.matchMedia("(orientation: portrait)").matches) {
    console.log("Portrait mode");
    // 竖屏模式下的处理逻辑
  } else if (window.matchMedia("(orientation: landscape)").matches) {
    console.log("Landscape mode");
    // 横屏模式下的处理逻辑
  }
}

// 初始检测
detectOrientation();

// 监听屏幕方向变化
window.addEventListener("resize", detectOrientation);

这段代码首先定义了一个 detectOrientation 函数，该函数使用 matchMedia 来检测当前屏幕方向。然后，它使用 addEventListener 监听 resize 事件，以便在屏幕方向改变时重新检测。注意，resize 事件在某些情况下可能会频繁触发，所以最好进行节流处理，避免性能问题。

screen.orientation API 的优势与局限？

screen.orientation API 提供了更精确的屏幕方向信息，但兼容性不如 matchMedia。老版本的浏览器可能不支持这个 API。

使用 screen.orientation 的一个例子：

function detectOrientation() {
  if (screen.orientation) {
    console.log("Orientation:", screen.orientation.type);
    // 根据 screen.orientation.type 进行处理
  } else {
    // 兼容旧版本浏览器
    if (window.innerWidth > window.innerHeight) {
      console.log("Landscape mode (fallback)");
    } else {
      console.log("Portrait mode (fallback)");
    }
  }
}

// 初始检测
detectOrientation();

// 监听屏幕方向变化
window.addEventListener("orientationchange", detectOrientation);

这段代码首先检查 screen.orientation 是否存在。如果存在，它会输出 screen.orientation.type，例如 portrait-primary 或 landscape-primary。如果不存在，它会使用 window.innerWidth 和 window.innerHeight 来判断屏幕方向，这是一个兼容旧版本浏览器的 fallback 方法。

orientationchange 事件是专门用于监听屏幕方向变化的事件，在支持的浏览器中，它比 resize 事件更可靠。

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

兼容性问题是前端开发中永远绕不开的话题。对于屏幕方向检测，最好的策略是 feature detection 和提供 fallback 方案。

首先，使用 typeof screen.orientation !== 'undefined' 来检测 screen.orientation API 是否存在。如果不存在，可以使用 matchMedia 或者 window.innerWidth 和 window.innerHeight 来进行检测。

其次，考虑到不同浏览器对 orientationchange 事件的支持程度不同，可以同时监听 resize 事件，并在 resize 事件处理函数中进行节流处理，避免性能问题。

最后，可以使用 polyfill 来为老版本的浏览器提供 screen.orientation API 的支持。但需要注意的是，polyfill 可能会增加代码体积，所以需要权衡利弊。

function detectOrientation() {
  let orientation = "unknown";

  if (screen.orientation && screen.orientation.type) {
    orientation = screen.orientation.type;
  } else if (window.matchMedia("(orientation: portrait)").matches) {
    orientation = "portrait";
  } else if (window.matchMedia("(orientation: landscape)").matches) {
    orientation = "landscape";
  } else {
    orientation = window.innerWidth > window.innerHeight ? "landscape (fallback)" : "portrait (fallback)";
  }

  console.log("Current orientation:", orientation);
  // 根据 orientation 进行处理
}

// 初始检测
detectOrientation();

// 监听屏幕方向变化
window.addEventListener("orientationchange", detectOrientation);
window.addEventListener("resize", function() {
  // 节流处理
  setTimeout(detectOrientation, 200);
});

这段代码综合使用了 screen.orientation、matchMedia 和 window.innerWidth/innerHeight，并同时监听了 orientationchange 和 resize 事件，以最大限度地提高兼容性。同时，对 resize 事件进行了节流处理，避免了性能问题。

以上就是《JS检测手机横竖屏的3种方法》的详细内容，更多关于移动端横竖屏,屏幕方向的资料请关注golang学习网公众号！