uni-app ios 横屏之后界面只会出现一半的情况

在 uni-app 中，iOS 设备横屏后界面只显示一半的问题，通常是由于页面布局或样式没有正确适配横屏模式导致的。以下是一些可能的原因和解决方案：

1. 检查页面布局是否支持横屏

确保页面布局能够自适应屏幕宽度和高度。可以使用 flex 布局或百分比宽度来确保内容在横屏模式下正常显示。

.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

2. 设置 viewport 标签

在 pages.json 或页面的 <template> 中，确保 viewport 标签正确设置，以支持横屏模式。

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

注意：viewport-fit=cover 可以确保页面内容覆盖整个屏幕。

3. 使用 uni.getSystemInfo 动态调整布局

通过 uni.getSystemInfo 获取设备的屏幕宽度和高度，动态调整布局。

uni.getSystemInfo({
  success(res) {
    const screenWidth = res.screenWidth;
    const screenHeight = res.screenHeight;
    console.log('屏幕宽度:', screenWidth, '屏幕高度:', screenHeight);
    // 根据屏幕尺寸动态调整布局
  }
});

4. 检查 pages.json 中的横屏配置

在 pages.json 中，确保页面的 orientation 设置为 auto 或 landscape，以支持横屏模式。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "pageOrientation": "auto" // 支持自动横竖屏切换
      }
    }
  ]
}

5. 处理横屏事件

在页面中监听横屏事件，动态调整布局。

onLoad() {
  uni.onWindowResize((res) => {
    const { windowWidth, windowHeight } = res.size;
    console.log('屏幕宽度:', windowWidth, '屏幕高度:', windowHeight);
    // 根据屏幕尺寸动态调整布局
  });
}

6. 检查样式问题

确保页面样式没有固定宽度或高度，导致横屏模式下内容被截断。例如：

/* 错误示例 */
.page {
  width: 375px; /* 固定宽度 */
  height: 667px; /* 固定高度 */
}

/* 正确示例 */
.page {
  width: 100%;
  height: 100%;
}

7. iOS 安全区域适配

在横屏模式下，iOS 设备的安全区域（如刘海屏）可能会导致内容被遮挡。可以使用 env(safe-area-inset-*) 来处理安全区域。

.container {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}