跳至内容
WebViewGold 从 Vibe Coding 到 App Store
中文
获取 WebViewGold

Google Play 要求

WebView 应用中的 Android 15 无边框显示:修复被状态栏和导航栏遮挡的内容

以 Android 15(API 级别 35)或更高版本为目标的应用,默认会在状态栏和导航栏后面绘制内容;从 Android 16 开始,退出选项也不再有效。在 Web 封装应用中,表现为页眉跑到时钟下面,或者标签栏被手势指示条挡住。修复方法是决定由谁来处理边衬区(insets):原生外壳还是您的 CSS,并且只让其中一方来处理。

每个平台一次性 $109 起,或由我们的团队全程代劳,$698 起。

  • 审核通过保证 – 否则 14 天内退款
  • 无需编程
  • 一次性付费,免费更新
  • 7×24 小时人工支持
  • 2014 年起德国出品 · ISO 27001

Android 15 和 Android 16 带来了哪些变化

对于以 Android 15(API 级别 35)为目标的应用,Android 15 默认以无边框(edge-to-edge)方式显示。状态栏和手势导航栏变为透明,系统也不再把您的内容推到它们下方;使用三按钮导航时,导航栏为半透明。除非应用处理了窗口边衬区,否则部分内容会位于系统栏下面。设置状态栏颜色的传统方式 setStatusBarColor 已被弃用,在 Android 15 上对这些应用不再起作用。

Android 15 仍然提供了一个通过主题属性临时退出的选项。对于以 Android 16(API 级别 36)为目标的应用,这个退出选项已被弃用,并在 Android 16 设备上停用。Google Play 要求新应用和更新以 API 级别 36 为目标,因此新上传的应用已经没有退出选项:应用必须处理边衬区。

Play Console 会显示什么

无边框问题不会以传统的政策拒审形式出现。它们会以建议的形式出现在发布信息中心上,标题例如“Edge-to-edge may not display for all users”(无边框显示可能无法对所有用户正常呈现)和“Your app uses deprecated APIs or parameters for edge-to-edge”(您的应用使用了已弃用的无边框 API 或参数)。第二条会列出 Window.setStatusBarColor 或 setNavigationBarColor 之类的调用以及它们所在的类,这些类往往来自库,而不是您自己的代码。

真正的风险在于用户看到的情况:一个位于时钟下面、点不到的菜单图标,或者一个被手势栏挡住的结账按钮。审核人员可能会把这视为功能故障,用户也肯定会在评价中提到。功能故障指南介绍了封装应用在上线当天会遇到的其他问题。

Web 封装应用中的症状

页眉跑到时钟下面

您的吸顶页眉从屏幕最顶端开始,于是状态栏图标压在了您的标志和菜单按钮上。

标签栏被手势指示条挡住

一个 position: fixed; bottom: 0 的导航栏会落到手势指示条或三按钮栏下面,点按操作落在了系统栏上。

状态栏图标看不见

状态栏透明时,白色页面上的白色图标,或深色页面上的黑色图标,都会消失不见。

双重内边距

原生外壳和您的 CSS 都为系统栏留出了空间,结果在顶部或底部留下一条很厚的空白带。

键盘遮挡输入框

如果布局忽略了可视视口(visual viewport),表单底部附近的输入框会滑到键盘下面。

我的iOS WebView应用终于通过审核了。谢谢!!

塔哈·法鲁基(Taha Farooqui) · CodeCanyon

为边衬区选定唯一的负责方

设置方式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从屏幕边缘滑动时系统栏会重新出现;让重要的控件远离边缘

适合无边框显示的 Web 应用 CSS

首先在 viewport meta 标签中加入 viewport-fit=cover:<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">。然后用安全区域边衬区为固定元素添加内边距。同样的 CSS 也适用于 iOS 应用;准则 4.0 安全区域指南介绍了 iOS 方面的设置。

css
: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));
}

逐步修复

大约一小时,其中大部分时间用于在两个模拟器上测试。

  1. 更新模板,而不是直接提高 targetSdk

    旧的 WebViewGold 项目以低于 35 的 API 级别为目标,从来不必处理无边框显示。手动提高这个数字,会跳过与之配套的代码。当前模板包含 Android 15 状态栏方面的改进(更新日志 16.4 版起)以及之后的状态栏优化;请按照目标 API 级别指南中的说明迁移您的设置,或者在 Cloud Builder 中重新构建。

  2. 决定由谁负责边衬区

    对于大多数 Vibe Coding 应用,原生方案最稳妥:TRANSPARENT_STATUS_BAR 为 false,并把您的品牌色设为 colorPrimaryDark。只有当您的设计需要内容延伸到状态栏后面时,才选择透明方案,并在 CSS 中始终如一地处理边衬区。

  3. 设置颜色和图标对比度

    根据您的颜色设置 blackStatusBarText。如果颜色因页面而异(深色模式、彩色头图),就从 JavaScript 用 statusbarcolor://R,G,B 以及 statusbartextcolor://white 或 statusbartextcolor://black 切换;bottombarcolor:// 和 navbartextcolor:// 对 Android 导航栏起同样的作用。参见动态 UI API。

  4. 添加 CSS,也可以只在应用内生效

    把安全区域 CSS 放进您的 Web 应用;如果只想在应用内生效,就放进项目的custom.css。对于全屏高度的页面,把 100vh 替换为 100dvh。

  5. 按组合矩阵测试

    Android 15 和 Android 16 模拟器,各自分别用手势导航和三按钮导航测试一次;一个带屏幕刘海(display cutout)的设备配置;横屏(HIDE_NAVIGATION_BAR_IN_LANDSCAPE 可能有帮助);以及一个打开键盘的表单。在每种情况下,检查页眉、底部栏以及列表的第一项和最后一项。

  6. 上传并重新查看信息中心

    以更高的版本代码上传。指向某个库的已弃用 API 建议可能仍会保留;关键在于您界面中的任何内容都不在系统栏下面。

提示词:让您的 Web 应用适配无边框显示

这个提示词不会改动桌面布局,只会添加边衬区。

粘贴到 Lovable、Bolt、Cursor 或 Claude Code 中
我的 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. 不要改变普通桌面浏览器中的颜色、间距或行为。
列出你修改过的每个文件和选择器。

无边框显示检查清单

  • 使用当前 WebViewGold 模板构建,而不是一个只提高了 targetSdk 的旧项目。
  • 边衬区只有一个负责方:原生(不透明状态栏)或 CSS(透明状态栏),绝不两者兼有。
  • 在每个页面上、浅色和深色模式下,状态栏图标都清晰可读。
  • 无论使用手势导航还是三按钮导航,页眉和底部栏都不会被系统栏遮挡。
  • viewport-fit=cover,并为固定元素加上 env(safe-area-inset-*) 内边距。
  • 已在 Android 15 和 16 上、竖屏和横屏下、键盘打开时进行测试。

常见问题

我还能在 Android 上退出无边框显示吗?

新上传的应用不行。这个退出属性对以 API 级别 35 为目标的应用有效;对于以 API 级别 36 为目标的应用,它在 Android 16 设备上已被停用,而 Google Play 现在要求新应用和更新以 API 级别 36 为目标。

为什么我的状态栏图标看不见?

状态栏与图标颜色相同,通常是因为它透明地叠在浅色或深色页眉上。根据状态栏颜色设置 blackStatusBarText,或者按页面用 statusbartextcolor://white 或 statusbartextcolor://black 切换。

Android 的无边框显示会影响我的 iOS 应用吗?

不会,但 iOS 有自己的安全区域。WebViewGold for iOS 默认通过 autoAdjustSafeAreaInsets 处理它们,本页的 CSS 在两个应用中都适用。

Play Console 说我使用了 setStatusBarColor,但我从没写过。为什么?

这条建议会列出在 bundle 中任何地方发现的调用,包括 Material 组件之类的库。它是建议,不是拒审。请让模板及其 SDK 保持最新,并确保您的界面没有被系统栏遮挡。

更新后我的平板布局变了。这有关系吗?

部分有关。对于以 Android 16 为目标的应用,Android 会在大屏幕(最小宽度 600 dp 或以上)上忽略屏幕方向和可调整大小的限制,所以 TABLET_ORIENTATION 中的竖屏锁定在那里可能不再生效。请确保您的 Web 应用有可用的平板和横屏布局。

让您的应用上架商店的三种方式

结果相同,只是您需要投入的工作量不同。三种方式都附带审核通过保证和 7×24 小时人工支持。

自己动手

$109 每个平台,一次性付费

WebViewGold 许可证:一个现成的 Xcode 或 Android Studio 项目。粘贴您的 URL,设置名称和图标,开启所需功能,构建并提交。永久免费更新。

在主页查看方案

Cloud Builder

$349 每个许可证,一次性附加购买

无需 Mac、Xcode 或 Android Studio:在浏览器中完成配置,我们在云端构建两个应用,并将其交付到 App Store Connect 和 Play Console。

Cloud Builder 如何运作 试用免费演示

Full Service

$698 每个平台 $798

把您的 URL 和图标发给我们。我们的团队在 72 小时内完成配置、构建并交付您的应用,白标,附源码项目。两个平台共 $1,158。

Full Service 详情 服务提供方: WeSetupYourWebViewApp

冬季特惠价格有效期至 2026年12月31日。

准备好发布您的应用了吗?

App Store & Google Play 审核通过保证 – 否则 14 天内退款

想直接交给我们?Full Service:我们在 72 小时内完成配置、构建并交付,每个平台 $698 起。有疑问?通过 7×24 小时在线聊天联系我们。

退款依据我们 FAQ 中列出的条件:应用因非内容原因被 Apple 和/或 Google 拒审,并在购买后 14 天内提出申请。