Lovable + 安全区域
一个在浏览器里看起来完美的 Lovable 应用，到了手机上可能页眉被灵动岛遮住、标签栏被主屏幕指示条挡住，或者在深色模式下时钟变成白底白字。WebViewGold 默认会把页面保持在安全区域内，并可以原生地或通过 JavaScript 为状态栏着色。下面介绍什么时候依赖默认设置，什么时候用 CSS 实现边到边显示。
每个平台一次性 $109 起，或由我们的团队全程代劳，$698 起。
在 iOS 上 autoAdjustSafeAreaInsets 默认开启，因此 WebView 从状态栏、刘海或灵动岛下方开始。状态栏使用 statusBarBackgroundColor 和 statusBarTextColor（白色或黑色），深色模式则使用 darkModeStatusBarBackgroundColor 和 darkModeStatusBarTextColor。在 Android 上，颜色来自 style.xml 中的 colorPrimaryDark，文字颜色来自 blackStatusBarText。
如需铺满屏幕的头图、地图或视频，请在 iOS 上把 transparentStatusBar 设为 true、autoAdjustSafeAreaInsets 设为 false，或在 Android 上启用 TRANSPARENT_STATUS_BAR。此后由您的 CSS 负责处理边距：viewport-fit=cover，再在每个固定定位元素上使用 env(safe-area-inset-*)。
用 CSS 构建的底部栏经常被 iPhone 的主屏幕指示条遮住。请用 env(safe-area-inset-bottom) 为它们添加内边距，或者让 WebViewGold 通过 bottombar 和 bottombarBackgroundColor 在页面下方添加一条原生色带（iPad 使用 iPadBottombar，安全区域文档）。
Google Play 现在要求新应用和应用更新以 Android 16（API 级别 36）为目标平台，而在该版本中应用不能再选择退出边到边显示：窗口会延伸到状态栏和导航栏后面，应用必须自行处理边衬区。WebViewGold 模板会跟进这些平台变化（更新免费），所以请用最新版本构建，并在真机上测试手势导航条区域。
把这段粘贴到 Lovable 中以实现 Web 应用端。检查结果，发布，然后在 WebViewGold 应用中测试。
这个应用运行在一个原生外壳（WebViewGold）中，其 User-Agent 包含 "WebViewGold"。 1. 在 index.html 的 viewport meta 标签中添加 viewport-fit=cover。 2. 为固定在底部的栏、面板和抽屉添加底部安全区域内边距（pb-[env(safe-area-inset-bottom)]），为固定在顶部的元素（包括提示消息）添加顶部内边距（pt-[env(safe-area-inset-top)]）。 3. 创建一个辅助函数 setStatusBar(r, g, b)，仅当 navigator.userAgent 包含 "WebViewGold" 时导航到 statusbarcolor://r,g,b，颜色未变化时跳过调用。 4. 在首次渲染后以及每次在浅色和深色主题之间切换时，用页眉背景色调用它。 5. 确保在 320px 宽的屏幕上没有任何内容横向滚动。 6. 告诉我浅色和深色模式下页眉背景色的十六进制值，用于原生状态栏设置。
只要有一个优化良好的Web应用版本，几分钟内您就能拥有一个出色的移动应用。除此之外，客户服务非常友好且乐于助人！我只能说：推荐WebViewGold :-)
| 症状 | iOS（Config.swift） | Android（Config.java、style.xml） | 在您的 Web 应用中 |
|---|---|---|---|
| 页眉被刘海或灵动岛遮住 | 保持 autoAdjustSafeAreaInsets 开启（默认） | 保持 TRANSPARENT_STATUS_BAR 关闭 | 仅在边到边显示时：padding-top: env(safe-area-inset-top) |
| 深色页眉上方出现白色状态栏 | statusBarBackgroundColor = 页眉颜色 | colorPrimaryDark = 页眉颜色 | 按页面调用 statusbarcolor://R,G,B |
| 深色模式下时钟和电量看不清 | darkModeStatusBarBackgroundColor、darkModeStatusBarTextColor | blackStatusBarText；运行时使用 statusbartextcolor://white | prefers-color-scheme；在 Android 上还有注入的 isDarkMode 变量 |
| 标签栏被主屏幕指示条或手势导航条遮挡 | bottombar + bottombarBackgroundColor | 用 bottombarcolor:// 设置导航栏颜色，用 navbartextcolor:// 设置文字颜色 | padding-bottom: env(safe-area-inset-bottom) |
| 全屏视频、游戏或照片查看器 | hidebars://on：状态栏背景变为透明，时钟仍然显示 | hidebars://on：隐藏状态栏和导航栏；从顶部下滑可以让它们重新出现 | 用户离开该页面时调用 hidebars://off |
Lovable 应用中的页面常常有不同的页眉颜色（深色的落地页头图、白色的设置页）。请按路由设置状态栏；statusbarcolor:// 是主命令，它还会自动选择易读的文字颜色，并调整 iOS 底部栏或 Android 导航栏。iOS 每次脚本运行只处理一个桥接调用，所以只发送这一条：
const inApp = navigator.userAgent.includes("WebViewGold"); // 您的自定义 User-Agent 标记
let lastColor = "";
function setStatusBar(r, g, b) {
const color = r + "," + g + "," + b;
if (!inApp || color === lastColor) return;
lastColor = color;
window.location.href = "statusbarcolor://" + color;
}
// 每个页面的 RGB 值 (hex、hsl 或 oklch 主题色事先转换一次)
const BAR_COLORS = {
"/": [15, 23, 42], // 深色头图
"/settings": [255, 255, 255],
};
// 在首次渲染后以及每次客户端路由切换后调用
function onRouteChange(path) {
const c = BAR_COLORS[path] || [255, 255, 255];
setStatusBar(c[0], c[1], c[2]);
}仅当您的设计需要内容延伸到状态栏后面时才这样做；否则请保持默认设置。
iOS：transparentStatusBar = true，autoAdjustSafeAreaInsets = false。Android：TRANSPARENT_STATUS_BAR = true。这是原生层面的改动，需要重新构建。
在您的 Lovable 应用的 viewport meta 标签中（或在框架的 viewport 设置中）使用：width=device-width, initial-scale=1, viewport-fit=cover。没有它，iOS 上的 env() 值会一直是零。
页眉使用 padding-top: max(12px, env(safe-area-inset-top))，底部栏使用 padding-bottom: max(8px, env(safe-area-inset-bottom))，贴靠两侧的元素在横屏时使用左右边距。定位在 top: 0 的提示消息、底部面板和弹窗，是最容易被遗忘的。
不同 Android WebView 版本报告的 env(safe-area-inset-*) 值可能不同，所以不要只依赖它：请在使用手势导航的较新手机上测试透明状态栏，并保留上面的 max() 回退值。
带灵动岛的 iPhone、您能找到的最小尺寸 iPhone、横屏的 iPad，以及使用手势导航的 Android 手机，每种都要在浅色和深色模式下测试。审核人员就用这些设备，并会依据准则 4.0 截图记录任何重叠（解决准则 4.0 设计类拒审）。
会，默认就会。在 iOS 上，autoAdjustSafeAreaInsets 会让页面在各种机型上都位于状态栏区域下方，状态栏则显示您配置的颜色。只有当您有意切换为透明状态栏时，才需要在 CSS 中处理边距。
可以。从 JavaScript 导航到 statusbarcolor://R,G,B（例如 statusbarcolor://15,23,42），WebViewGold 就会为状态栏重新着色、选择白色或黑色文字，并调整 iOS 底部栏或 Android 导航栏。statusbartextcolor://white 或 statusbartextcolor://black 可以明确指定文字颜色。
要么 viewport meta 标签缺少 viewport-fit=cover，要么 WebViewGold 仍把页面放在安全区域内（默认行为），这时 0 就是正确的值，也不会有任何重叠。开启 transparentStatusBar 并关闭 autoAdjustSafeAreaInsets 之后，这些值才会变成实际数值。
在 iOS 上，在 Config.swift 中设置 darkModeStatusBarBackgroundColor 和 darkModeStatusBarTextColor。在 Android 上，WebViewGold 会注入 JavaScript 变量 isDarkMode，您的页面可以据此用合适的颜色调用 statusbarcolor://；在两个平台上，CSS 中都可以使用 prefers-color-scheme。
有可能。内容被状态栏遮挡、控件被主屏幕指示条挡住、弹窗被裁切，都是典型的准则 4.0 设计问题，而且会让应用看起来像硬塞进手机的网站，进而引出准则 4.2 方面的问题。
结果相同，只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。
$109 每个平台，一次性付费
WebViewGold 许可证：一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL，设置名称和图标，开启所需功能，构建并提交。永久免费更新。
在主页查看方案$349 每个许可证，一次性附加购买
无需 Mac、Xcode 或 Android Studio：在浏览器中完成配置，我们在云端构建两个应用，并将其交付到 App Store Connect 和 Play Console。
Cloud Builder 如何运作 试用免费演示$698 每个平台 $798
把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用，白标，附源码项目。两个平台共 $1,158。
Full Service 详情 服务提供方：
冬季特惠价格有效期至 2026年12月31日。
App Store & Google Play 审核通过保证 – 否则 14 天内退款
想直接交给我们？Full Service：我们在 72 小时内完成配置、构建并交付，每个平台 $698 起。有疑问？通过 7×24 小时在线聊天联系我们。
退款依据我们 FAQ 中列出的条件：应用因非内容原因被 Apple 和/或 Google 拒审，并在购买后 14 天内提出申请。