uniapp 判断 横屏还是竖屏

为什么需要判断横屏还是竖屏

在移动端开发中，手机的横竖屏切换是一个很常见的操作。尤其是在一些需要展示大量内容的应用中，横屏展示比竖屏更加适合，比如一些游戏、视频、网页等。而在开发过程中，我们需要针对不同的屏幕方向进行不同的布局，以达到更佳的用户体验。因此，在进行移动端应用开发时，判断手机的横竖屏状态并且进行相应的处理显得尤为必要。

uniapp 如何判断横屏还是竖屏

uniapp 提供了一个非常方便的方式来判断手机的横竖屏状态，即利用 uni.getSystemInfo() API 获取到当前设备的信息来判断。在获取到当前设备信息后，我们可以通过判断设备的 windowWidth 与 windowHeight 的值的大小关系来确定手机的横竖屏状态。

uni.getSystemInfo() API 的使用

uni.getSystemInfo({
  success: function (res) {
    console.log(res.windowWidth)
    console.log(res.windowHeight)
  }
});

uni.getSystemInfo() 接口是 uniapp 提供的获取设备信息的 API，具体参数和返回值可以查看 uniapp 官网文档。在 success 回调函数中，可以获取到设备的信息，其中 windowWidth 表示屏幕宽度，windowHeight 表示屏幕高度。

判断横竖屏的方法

通过获取到设备的信息，我们可以根据以下两个条件来判断手机的横竖屏状态：

当 windowWidth 大于 windowHeight 时，设备为横屏状态

当 windowWidth 小于 windowHeight 时，设备为竖屏状态

uni.getSystemInfo({
  success: function (res) {
    if (res.windowWidth > res.windowHeight) {
      console.log('横屏')
    } else {
      console.log('竖屏')
    }
  }
});

以上代码表示打印当前设备的横竖屏状态，横屏时输出“横屏”，竖屏时输出“竖屏”。可以根据实际情况来执行不同的布局。