uniapp 判断横屏还是竖屏

移动设备的横屏和竖屏模式在开发移动应用时具有重要意义。uniapp作为一种跨平台的应用开发框架，提供了一些方法来判断设备当前是处于横屏还是竖屏模式。本文将介绍在uniapp中如何判断设备的屏幕方向，以便根据不同的情况进行适当的布局和显示调整。

1. 使用`@media`查询

uniapp支持在样式中使用@media查询来根据不同的屏幕尺寸和方向设置不同的样式。以下是一个使用@media查询判断屏幕方向的示例：

<style>
  @media screen and (orientation: portrait) {
    /* 竖屏样式 */
  }

  @media screen and (orientation: landscape) {
    /* 横屏样式 */
  }
</style>

通过这种方式，您可以根据屏幕的横竖方向来设置不同的样式，以适应不同的展示需求。

2. 使用`uni.getSystemInfo`方法

uniapp提供了uni.getSystemInfo方法来获取设备的系统信息，包括屏幕的宽度和高度。通过比较宽度和高度的大小，您可以判断设备是处于横屏还是竖屏模式。以下是一个使用uni.getSystemInfo方法判断屏幕方向的示例：

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

3. 监听`resize`事件

您还可以通过监听resize事件来实时获取屏幕尺寸变化，从而判断设备的屏幕方向。以下是一个监听resize事件判断屏幕方向的示例：

// 在页面中监听resize事件
uni.onWindowResize(function (res) {
  if (res.size.windowWidth > res.size.windowHeight) {
    console.log("横屏模式");
  } else {
    console.log("竖屏模式");
  }
});

总结

uniapp作为一种跨平台的应用开发框架，提供了多种方法来判断设备的横竖屏状态。通过使用@media查询、uni.getSystemInfo方法或监听resize事件，您可以根据不同的情况灵活调整页面布局和显示效果，以提供更好的用户体验。在开发移动应用时，合理使用这些方法可以使您的应用在不同的屏幕方向下都能表现出色。

uniapp 判断 横屏还是竖屏