uni-app 飞书小程序横屏后两端留白

在开发飞书小程序时，如果你希望实现横屏显示并且避免两端留白，可以采取以下几种方法：

1. 使用 CSS 进行适配

你可以通过 CSS 的 transform 属性来调整页面内容，使其适应横屏显示。

/* 假设页面容器为 .container */
.container {
  width: 100vh; /* 将宽度设置为屏幕高度 */
  height: 100vw; /* 将高度设置为屏幕宽度 */
  transform: rotate(90deg) translateY(-100%);
  transform-origin: left top;
  position: absolute;
  top: 0;
  left: 0;
}

2. 使用 uni.onWindowResize 监听屏幕变化

uni-app 提供了 uni.onWindowResize 方法，可以监听屏幕尺寸的变化，并根据屏幕方向调整布局。

uni.onWindowResize((res) => {
  if (res.size.windowWidth > res.size.windowHeight) {
    // 横屏
    console.log('横屏');
    // 调整布局
  } else {
    // 竖屏
    console.log('竖屏');
    // 调整布局
  }
});

3. 使用 uni.setScreenOrientation 强制横屏

你可以使用 uni.setScreenOrientation 方法强制设置屏幕方向为横屏。

uni.setScreenOrientation({
  orientation: 'landscape'
});

4. 使用 pageOrientation 配置

在 pages.json 中，你可以通过 pageOrientation 配置页面方向。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "pageOrientation": "landscape" // 强制横屏
      }
    }
  ]
}

5. 使用 viewport 元标签

通过设置 viewport 元标签，可以调整页面的缩放和布局。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

6. 使用 uni.getSystemInfo 获取屏幕信息

你可以通过 uni.getSystemInfo 获取屏幕信息，并根据屏幕方向调整布局。

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

7. 使用 CSS Media Queries

通过 CSS 媒体查询，可以根据屏幕方向应用不同的样式。

[@media](/user/media) screen and (orientation: landscape) {
  /* 横屏样式 */
  .container {
    width: 100vh;
    height: 100vw;
  }
}

[@media](/user/media) screen and (orientation: portrait) {
  /* 竖屏样式 */
  .container {
    width: 100vw;
    height: 100vh;
  }
}