uniapp竖屏和横屏适配

随着智能手机的不断发展，越来越多的APP开始提供横屏和竖屏模式，来满足不同用户的使用需求。在开发uniapp的时候，我们也需要考虑横屏和竖屏的适配问题。

一般来说，竖屏是APP的默认模式。但是对于一些需要横屏展示的场景，就需要考虑横屏适配。

首先，我们需要在manifest.json文件中设置横屏支持，并指定横屏下APP的方向。

"app-plus": {
    "videoFullscreen":false,
    "orientation": "portrait",
    "fullScreen":true,
    "titleNView":true,
    "splashscreen": {
      "autoclose": true,
      "duration": 1000
    },
    "softinputMode": "resize",
    "whiteList":[
      "tel",
      "sms",
      "mailto"
    ]
  }

然后，在页面中我们需要根据横屏或者竖屏模式来动态设置样式和布局。

对于横屏模式，我们可以使用弹性布局来实现页面元素的根据页面方向自适应。比如：

<div class="container">
  <div class="left"></div>
  <div class="content"></div>
  <div class="right"></div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row;
  }
  
  .content {
    flex: 1;
  }
  
  @media (orientation: landscape) {
    .container {
      flex-direction: column;
    }
    .left {
      height: 30%;
    }
    .right {
      height: 30%;
    }
    .content {
      height: 40%;
    }
  }
</style>

对于竖屏模式，我们可以设置最大宽度，并使用媒体查询来适应不同屏幕大小，比如：

<div class="container"></div>

<style>
  .container {
    max-width: 600px;
  }
  
  @media (max-width: 400px) {
    .container {
      font-size: 14px;
    }
  }
  
  @media (min-width: 401px) and (max-width: 800px) {
    .container {
      font-size: 16px;
    }
  }
  
  @media (min-width: 801px) {
    .container {
      font-size: 18px;
    }
  }
</style>

除了上面的样式设置之外，还需要考虑一些交互逻辑问题，比如视频播放器等元素在横屏和竖屏模式下的展示效果。

总结

在uniapp中，实现横屏和竖屏适配主要是设置manifest.json文件中的orientation属性，并在页面中动态设置样式和布局。在实践中，需要考虑交互逻辑和不同屏幕大小的适配。