Uniapp 如何判断横屏与竖屏

在 Uniapp 开发中，准确判断横屏与竖屏状态对于优化用户体验至关重要。不同的屏幕方向可能需要呈现不同的界面布局和交互方式。下面就来详细介绍一下在 Uniapp 里实现判断横屏与竖屏的方法。

监听屏幕旋转事件

Uniapp 提供了便捷的生命周期钩子函数来监听屏幕方向的变化。在页面的 onLoad 或 created 钩子函数中，可以使用 uni.onWindowResize 方法来监听窗口大小的变化。当屏幕旋转时，窗口的宽度和高度会发生改变，通过比较宽度和高度的值，就能判断出当前是横屏还是竖屏状态。

示例代码如下：

export default {
  data() {
    return {
      isLandscape: false // 用于存储是否横屏的状态
    };
  },
  onLoad() {
    uni.onWindowResize((res) => {
      if (res.width > res.height) {
        this.isLandscape = true;
      } else {
        this.isLandscape = false;
      }
    });
  }
};

在上述代码中，onWindowResize 回调函数接收一个包含窗口宽度和高度信息的对象 res。通过比较 res.width 和 res.height 的大小，更新 isLandscape 的值，从而确定屏幕方向。

使用 CSS 媒体查询辅助判断

除了通过 JavaScript 代码判断，还可以借助 CSS 媒体查询来处理不同屏幕方向的样式。例如，在 style 标签中使用 @media 规则：

/* 竖屏样式 */
@media screen and (orientation: portrait) {
  /* 这里编写竖屏时的样式 */
  body {
    background-color: lightblue;
  }
}

/* 横屏样式 */
@media screen and (orientation: landscape) {
  /* 这里编写横屏时的样式 */
  body {
    background-color: lightcoral;
  }
}

这种方式可以直接在样式层面根据屏幕方向应用不同的样式，与 JavaScript 判断相互配合，能更好地实现屏幕方向相关的功能。

在 Uniapp 开发中，结合 JavaScript 的事件监听和 CSS 的媒体查询，能够灵活且有效地判断横屏与竖屏状态，并为不同状态下的用户提供最佳的界面展示和交互体验。无论是开发游戏、视频应用还是各类资讯类 App，准确的屏幕方向判断都是提升用户体验的重要环节。