页眉跑到时钟下面
您的吸顶页眉从屏幕最顶端开始,于是状态栏图标压在了您的标志和菜单按钮上。
Google Play 要求
以 Android 15(API 级别 35)或更高版本为目标的应用,默认会在状态栏和导航栏后面绘制内容;从 Android 16 开始,退出选项也不再有效。在 Web 封装应用中,表现为页眉跑到时钟下面,或者标签栏被手势指示条挡住。修复方法是决定由谁来处理边衬区(insets):原生外壳还是您的 CSS,并且只让其中一方来处理。
每个平台一次性 $109 起,或由我们的团队全程代劳,$698 起。
对于以 Android 15(API 级别 35)为目标的应用,Android 15 默认以无边框(edge-to-edge)方式显示。状态栏和手势导航栏变为透明,系统也不再把您的内容推到它们下方;使用三按钮导航时,导航栏为半透明。除非应用处理了窗口边衬区,否则部分内容会位于系统栏下面。设置状态栏颜色的传统方式 setStatusBarColor 已被弃用,在 Android 15 上对这些应用不再起作用。
Android 15 仍然提供了一个通过主题属性临时退出的选项。对于以 Android 16(API 级别 36)为目标的应用,这个退出选项已被弃用,并在 Android 16 设备上停用。Google Play 要求新应用和更新以 API 级别 36 为目标,因此新上传的应用已经没有退出选项:应用必须处理边衬区。
无边框问题不会以传统的政策拒审形式出现。它们会以建议的形式出现在发布信息中心上,标题例如“Edge-to-edge may not display for all users”(无边框显示可能无法对所有用户正常呈现)和“Your app uses deprecated APIs or parameters for edge-to-edge”(您的应用使用了已弃用的无边框 API 或参数)。第二条会列出 Window.setStatusBarColor 或 setNavigationBarColor 之类的调用以及它们所在的类,这些类往往来自库,而不是您自己的代码。
真正的风险在于用户看到的情况:一个位于时钟下面、点不到的菜单图标,或者一个被手势栏挡住的结账按钮。审核人员可能会把这视为功能故障,用户也肯定会在评价中提到。功能故障指南介绍了封装应用在上线当天会遇到的其他问题。
您的吸顶页眉从屏幕最顶端开始,于是状态栏图标压在了您的标志和菜单按钮上。
一个 position: fixed; bottom: 0 的导航栏会落到手势指示条或三按钮栏下面,点按操作落在了系统栏上。
状态栏透明时,白色页面上的白色图标,或深色页面上的黑色图标,都会消失不见。
原生外壳和您的 CSS 都为系统栏留出了空间,结果在顶部或底部留下一条很厚的空白带。
如果布局忽略了可视视口(visual viewport),表单底部附近的输入框会滑到键盘下面。

我的iOS WebView应用终于通过审核了。谢谢!!
| 设置方式 | WebViewGold Android 设置 | 您的 CSS |
|---|---|---|
| 由原生外壳让页面保持在系统栏下方(推荐给大多数应用) | TRANSPARENT_STATUS_BAR 为 false:状态栏不透明,颜色取自 style.xml 中的 colorPrimaryDark;在浅色背景上使用深色图标时设置 blackStatusBarText | 无需任何设置。把下面的安全区域 CSS 作为保险保留下来;当外壳已经让页面避开系统栏时,它不应再增加额外空间。请在设备上确认一次。 |
| 页面在状态栏后面绘制(真正的全屏) | TRANSPARENT_STATUS_BAR 为 true | 在 viewport meta 标签中加入 viewport-fit=cover,为页眉加上 env(safe-area-inset-top) 内边距,并为固定的底部栏加上底部边衬区 |
| 原生底部导航 | ENABLE_NAVIGATION_FOOTER 为 true,条目位于 res/menu/menu_drawer.xml | 在应用内隐藏您自己的固定标签栏,避免两者叠在一起 |
| 沉浸式页面(视频、游戏、自助终端) | 从 JavaScript 调用 hidebars://on 和 hidebars://off | 从屏幕边缘滑动时系统栏会重新出现;让重要的控件远离边缘 |
首先在 viewport meta 标签中加入 viewport-fit=cover:<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">。然后用安全区域边衬区为固定元素添加内边距。同样的 CSS 也适用于 iOS 应用;准则 4.0 安全区域指南介绍了 iOS 方面的设置。
:root {
--inset-top: env(safe-area-inset-top, 0px);
--inset-bottom: env(safe-area-inset-bottom, 0px);
--inset-left: env(safe-area-inset-left, 0px);
--inset-right: env(safe-area-inset-right, 0px);
}
/* 吸顶页眉:内容从状态栏下方开始 */
.app-header {
position: sticky;
top: 0;
padding-top: calc(12px + var(--inset-top));
padding-left: calc(16px + var(--inset-left));
padding-right: calc(16px + var(--inset-right));
}
/* 固定标签栏:保持在手势指示条或按钮栏上方 */
.tab-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding-bottom: calc(8px + var(--inset-bottom));
}
/* 为标签栏留出空间,并用动态视口单位代替 100vh */
main {
min-height: 100dvh;
padding-bottom: calc(72px + var(--inset-bottom));
}大约一小时,其中大部分时间用于在两个模拟器上测试。
旧的 WebViewGold 项目以低于 35 的 API 级别为目标,从来不必处理无边框显示。手动提高这个数字,会跳过与之配套的代码。当前模板包含 Android 15 状态栏方面的改进(更新日志 16.4 版起)以及之后的状态栏优化;请按照目标 API 级别指南中的说明迁移您的设置,或者在 Cloud Builder 中重新构建。
对于大多数 Vibe Coding 应用,原生方案最稳妥:TRANSPARENT_STATUS_BAR 为 false,并把您的品牌色设为 colorPrimaryDark。只有当您的设计需要内容延伸到状态栏后面时,才选择透明方案,并在 CSS 中始终如一地处理边衬区。
根据您的颜色设置 blackStatusBarText。如果颜色因页面而异(深色模式、彩色头图),就从 JavaScript 用 statusbarcolor://R,G,B 以及 statusbartextcolor://white 或 statusbartextcolor://black 切换;bottombarcolor:// 和 navbartextcolor:// 对 Android 导航栏起同样的作用。参见动态 UI API。
把安全区域 CSS 放进您的 Web 应用;如果只想在应用内生效,就放进项目的custom.css。对于全屏高度的页面,把 100vh 替换为 100dvh。
Android 15 和 Android 16 模拟器,各自分别用手势导航和三按钮导航测试一次;一个带屏幕刘海(display cutout)的设备配置;横屏(HIDE_NAVIGATION_BAR_IN_LANDSCAPE 可能有帮助);以及一个打开键盘的表单。在每种情况下,检查页眉、底部栏以及列表的第一项和最后一项。
以更高的版本代码上传。指向某个库的已弃用 API 建议可能仍会保留;关键在于您界面中的任何内容都不在系统栏下面。
这个提示词不会改动桌面布局,只会添加边衬区。
我的 Web 应用也运行在原生 Android 和 iOS 应用(WebViewGold)中。Android 15 及更高版本以无边框方式绘制应用,因此固定元素可能会跑到状态栏和导航栏下面。请更新布局: 1. 在现有的 viewport meta 标签中加入 viewport-fit=cover,并保留其他值。 2. 为 env(safe-area-inset-top)、env(safe-area-inset-bottom)、env(safe-area-inset-left) 和 env(safe-area-inset-right) 定义 CSS 变量,每个都使用 0px 作为回退值。 3. 把顶部边衬区加到吸顶或固定页眉的内边距中,把底部边衬区加到每个固定底部栏、悬浮操作按钮和 Cookie 横幅的内边距中。 4. 为主要内容添加相应的底部内边距,让最后一项不会被底部栏挡住。 5. 对于全屏高度的布局,把 100vh 替换为 100dvh。 6. 不要改变普通桌面浏览器中的颜色、间距或行为。 列出你修改过的每个文件和选择器。
viewport-fit=cover,并为固定元素加上 env(safe-area-inset-*) 内边距。新上传的应用不行。这个退出属性对以 API 级别 35 为目标的应用有效;对于以 API 级别 36 为目标的应用,它在 Android 16 设备上已被停用,而 Google Play 现在要求新应用和更新以 API 级别 36 为目标。
状态栏与图标颜色相同,通常是因为它透明地叠在浅色或深色页眉上。根据状态栏颜色设置 blackStatusBarText,或者按页面用 statusbartextcolor://white 或 statusbartextcolor://black 切换。
不会,但 iOS 有自己的安全区域。WebViewGold for iOS 默认通过 autoAdjustSafeAreaInsets 处理它们,本页的 CSS 在两个应用中都适用。
这条建议会列出在 bundle 中任何地方发现的调用,包括 Material 组件之类的库。它是建议,不是拒审。请让模板及其 SDK 保持最新,并确保您的界面没有被系统栏遮挡。
部分有关。对于以 Android 16 为目标的应用,Android 会在大屏幕(最小宽度 600 dp 或以上)上忽略屏幕方向和可调整大小的限制,所以 TABLET_ORIENTATION 中的竖屏锁定在那里可能不再生效。请确保您的 Web 应用有可用的平板和横屏布局。
结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 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 天内提出申请。