uniapp 判断 横屏还是竖屏

前言

随着智能手机的普及，移动设备越来越多的被人们所关注。在移动设备上，屏幕方向的判断显得尤为重要，因为很多应用需要根据屏幕方向进行相应的布局和展示。本文将介绍在uniapp中判断横屏还是竖屏的方法。

1. 使用系统api判断屏幕方向

uniapp提供了获取系统信息的api，我们可以通过这些api获取当前设备的屏幕方向。具体代码如下：

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

2. 监听屏幕旋转事件

在uniapp中，我们可以使用wx.onWindowResize()方法来监听屏幕旋转事件。具体代码如下：

// 初始化页面时获取屏幕方向
uni.getSystemInfo({
  success: function(res) {
    if (res.screenWidth > res.screenHeight) {
      console.log('横屏')
    } else {
      console.log('竖屏')
    }
  }
})

// 监听屏幕旋转事件
wx.onWindowResize(function(res) {
  if (res.size.windowWidth > res.size.windowHeight) {
    console.log('横屏')
  } else {
    console.log('竖屏')
  }
})

3. 使用uni.createSelectorQuery()获取屏幕方向

除了使用系统api和监听屏幕旋转事件外，我们还可以使用uni.createSelectorQuery()方法获取当前设备的屏幕方向。具体代码如下：

// 获取屏幕方向
uni.createSelectorQuery().selectViewport().boundingClientRect(function(rect){
  if (rect.width > rect.height) {
    console.log('横屏')
  } else {
    console.log('竖屏')
  }
}).exec();

4. 总结

以上就是在uniapp中判断横屏还是竖屏的方法。无论是使用系统api、监听屏幕旋转事件还是使用uni.createSelectorQuery()，都可以轻松获取当前设备的屏幕方向。在应用程序中，我们可以根据屏幕方向来进行相应的布局和展示，提升用户体验。