uni-app在横屏模式下webview存在样式问题

在 uni-app 中，横屏模式下 WebView 的样式问题通常是由于屏幕方向变化导致的布局适配问题。以下是一些常见问题及解决方案：

1. WebView 内容未适配横屏

• 问题描述：在横屏模式下，WebView 内容可能未自动调整宽度或高度，导致内容显示不全或布局混乱。
• 解决方案：
  • 在 WebView 的页面中，使用 CSS 的 viewport 和 媒体查询 来适配横屏模式。

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

  • 使用 CSS 媒体查询：

  @media screen and (orientation: landscape) {
    /* 横屏样式 */
    body {
      width: 100vh;
      height: 100vw;
    }
  }

2. WebView 高度或宽度异常

• 问题描述：横屏模式下，WebView 的高度或宽度可能未正确设置，导致内容显示异常。
• 解决方案：
  • 在 uni-app 中，动态设置 WebView 的宽高：

  onLoad() {
    const { windowWidth, windowHeight } = uni.getSystemInfoSync();
    this.webviewStyle = {
      width: windowHeight + 'px', // 横屏时高度为宽
      height: windowWidth + 'px'  // 横屏时宽度为高
    };
  }

  • 在页面中使用动态样式：

  <web-view :style="webviewStyle" src="https://example.com"></web-view>

3. WebView 内容未重新布局

• 问题描述：横屏模式下，WebView 内容未重新布局，导致内容显示不全或错位。
• 解决方案：
  • 监听屏幕方向变化，强制刷新 WebView：

  onLoad() {
    uni.onWindowResize((res) => {
      if (res.deviceOrientation === 'landscape') {
        // 横屏处理
        this.forceReloadWebView();
      }
    });
  },
  methods: {
    forceReloadWebView() {
      this.webviewKey = Date.now(); // 通过修改 key 强制刷新 WebView
    }
  }

  • 在页面中使用 key 属性：

  <web-view :key="webviewKey" src="https://example.com"></web-view>

4. uni-app 页面与 WebView 的布局冲突

• 问题描述：在横屏模式下，uni-app 页面布局可能与 WebView 布局冲突，导致样式错乱。
• 解决方案：
  • 使用 flex 布局或 position: absolute 来确保 WebView 占满屏幕：

  <template>
    <view class="container">
      <web-view class="webview" src="https://example.com"></web-view>
    </view>
  </template>
  <style>
  .container {
    display: flex;
    width: 100vw;
    height: 100vh;
  }
  .webview {
    flex: 1;
  }
  </style>

5. 横屏模式下字体或元素缩放异常

• 问题描述：横屏模式下，WebView 中的字体或元素可能缩放异常。
• 解决方案：
  • 使用 rem 或 vw/vh 单位来适配不同屏幕尺寸：

  html {
    font-size: calc(100vw / 750 * 100); /* 假设设计稿宽度为 750px */
  }
  body {
    font-size: 0.16rem; /* 示例 */
  }

6. 横屏模式下 WebView 滚动异常

• 问题描述：横屏模式下，WebView 内容可能无法正常滚动。
• 解决方案：
  • 在 WebView 页面中，确保 body 或容器元素设置了 overflow: auto：

  body {
    overflow: auto;
    height: 100%;
  }