如何在iOS上使uniapp的web-view自定义样式生效？

Question

uniapp web-view ios 设置的web-view自定义样式在ios上没有生效。

<view class="w-full h-100rpx bg-red mb-100rpx">1111</view>

<web-view :src="webUrl" :fullscreen="false" :webview-styles="webviewStyles" style="width: 100rpx;height: 500rpx;padding: 0; margin: 0;overflow: hidden;margin-top: 200px;" :frameBorder="0"></web-view>

第一个view标签是顶部安全区的位置。
第二个web-view标签为网站内容。

设置了:fullscreen="false"后依然是全屏，第一个view标签应该是生效的，但是web-view的全屏将其隐藏。

h5页面所修改的样式倒是生效的。

Answer 1

在 UniApp 中使用 web-view 组件时，iOS 平台的自定义样式不生效可能是由于 原生渲染层级问题 和 安全区域适配未正确处理 导致的。可以尝试下下面方法：

1. 强制指定 web-view 位置和尺寸

通过 webview-styles 属性精确控制 web-view 的位置，确保不被 iOS 安全区域覆盖：

<template>
  <!-- 顶部安全区占位视图 -->
  <view class="safe-area-top"></view>
  
  <!-- 固定位置的 web-view -->
  <web-view 
    :src="webUrl" 
    :fullscreen="false"
    :webview-styles="webviewStyles"
  ></web-view>
</template>

<script>
export default {
  data() {
    return {
      webUrl: 'https://example.com',
      webviewStyles: {
        width: '100%',
        height: 'calc(100vh - 100rpx)', // 扣除顶部安全区高度
        top: '100rpx', // 与顶部安全区高度一致
        position: 'fixed'
      }
    }
  }
}
</script>

<style>
.safe-area-top {
  height: var(--status-bar-height); /* 使用 UniApp 内置变量 */
  background-color: red;
}
</style>

2. 启用安全区域适配

在 pages.json 中为当前页面启用安全区域适配：

{
  "path": "pages/your-page",
  "style": {
    "app-plus": {
      "safeArea": {
        "bottom": {
          "offset": "none"
        },
        "top": {
          "offset": "auto" // 自动避开顶部安全区
        }
      }
    }
  }
}

---

3. 使用 CSS 环境变量

通过 iOS 特有的安全区域 CSS 变量调整布局：

.safe-area-top {
  height: calc(env(safe-area-inset-top) + 100rpx); /* 安全区高度 + 自定义高度 */
  padding-top: env(safe-area-inset-top); /* 适配刘海屏 */
}

4. 验证 web-view 层级关系

在 iOS 平台，web-view 是原生组件且默认位于最高层级。若需在 web-view 上方显示内容，必须使用 原生导航栏 或 覆盖组件（如 cover-view）：

<!-- 使用原生导航栏 -->
<page-meta>
  <navigation-bar 
    title="Your Title" 
    background-color="#ff0000"
  />
</page-meta>

5. 动态计算布局（高级场景）

通过 uni.getSystemInfoSync() 获取安全区域尺寸并动态设置样式：

const systemInfo = uni.getSystemInfoSync();
const safeAreaTop = systemInfo.safeArea?.top || 0;

this.webviewStyles = {
  height: `calc(100vh - ${safeAreaTop + 100}px)`, // 动态调整高度
  top: `${safeAreaTop + 100}px`
}