安全区域重叠
固定页眉位于状态栏或灵动岛之下，底部标签栏被主屏幕指示条遮住，弹窗顶部被截断。用下文的 inset 设置修复。
4.0 的要求
第 4 节涉及设计。Apple 希望应用实用、直观，并遵循 Human Interface Guidelines（人机界面指南）；当界面质量不足时，审核人员就会依据 4.0 拒审：内容被裁切、与系统界面重叠、控件太小、布局与设备不匹配，或者体验明显不是为手机设计的。这属于主观判断，因此拒审文本通常附有一张用红圈标注的截图，准确告诉您要修什么。
对 Web 封装应用来说，根本原因很好预测：页面忽略了安全区域，按钮是为鼠标设计的，断点止步于平板宽度，而 iPad 上要么是被拉伸的手机布局，要么是字体极小的桌面网站。
Web 应用最常见的四类 4.0 问题
点击目标
小于 44×44 点的链接和图标、需要悬停才能打开的菜单、14 px 的复选框。在 CSS 中放大，增加内边距，去掉仅靠悬停触发的状态。
手机上的桌面界面
侧边栏、需要横向滚动的数据表格、12 px 的文字、首屏上的 Cookie 横幅、带四十个链接的页脚。在小屏幕上隐藏或重新设计。
iPad 布局
被拉伸到 13 英寸的手机布局，或者内容紧贴一侧边缘的桌面网站。为平板设置专门的断点，或将应用限定为仅支持 iPhone；参见Web 封装应用的 iPad 支持。
用 WebViewGold 设置和 CSS 修复安全区域
决定由谁处理 inset
autoAdjustSafeAreaInsets默认为 true：WebViewGold 会让您的页面保持在状态栏和主屏幕指示条之间，statusBarBackgroundColor、darkModeStatusBarBackgroundColor和statusBarTextColor会用您的颜色绘制状态栏。仅这一项就能解决大多数页眉重叠问题。全屏沉浸式设计：把 inset 交给 CSS
如果内容要延伸到状态栏后面，把
transparentStatusBar设为 true、autoAdjustSafeAreaInsets设为 false，在 viewport meta 标签中加入 viewport-fit=cover，并像下方代码片段那样用 env(safe-area-inset-top) 和 env(safe-area-inset-bottom) 为固定元素添加内边距。主屏幕指示条的快速修复
如果您的底部导航位于主屏幕指示条之下，而您今天又无法修改网站，把
bottombar设为 true 并设置bottombarBackgroundColor（必要时再设置iPadBottombar）。WebViewGold 会在页面下方添加一条原生栏。文档：修改安全区域。或者使用原生导航页脚
把
showNavFooter设为 true，并在 FooterBar.json 中定义标签。原生标签栏天生遵守安全区域，让应用用起来就像真正的应用，这对准则 4.2 也有帮助。用仅限应用的 CSS 放大点击目标
在 WebViewGold 项目的
custom.css中添加规则；它们只在应用内生效，网站保持原样（自定义 CSS 文档）。按钮、标签和图标链接的高度和宽度至少为 44 px。去掉浏览器痕迹
把
preventZoom设为 true（防止误触缩放），preventoverscroll设为 true（页眉上方不会出现橡皮筋回弹的空隙），disablecallout设为 true（长按不会弹出链接预览）。把orientationipad设为您的布局所支持的方向。
只要有一个优化良好的Web应用版本，几分钟内您就能拥有一个出色的移动应用。除此之外，客户服务非常友好且乐于助人！我只能说：推荐WebViewGold :-)
安全区域和点击目标 CSS
把这段代码放进 custom.css（仅在应用内生效）或全局样式表。HTML head 中的 viewport meta 标签需要包含 viewport-fit=cover，env() 的值才不会为零。
css
/* head: meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
.app-header { position: sticky; top: 0; padding-top: calc(12px + var(--safe-top)); }
.bottom-nav { position: fixed; bottom: 0; padding-bottom: calc(8px + var(--safe-bottom)); }
/* 44 x 44 pt minimum targets */
button, .btn, .tab, .icon-link { min-height: 44px; min-width: 44px; }
body { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* website-only elements, hidden inside the app */
.cookie-banner, .site-footer, .store-badges, .open-in-app-bar { display: none !important; }审核人员会截图的桌面端痕迹
- 靠悬停打开的导航；在 iOS 上第一次点击打开菜单，第二次才跳转，怎么用都别扭。
- 比屏幕还宽、需要横向滚动、而不是改成卡片展示的表格。
- 应用首屏上的 Cookie 同意对话框或“下载我们的应用”横幅。
- 正文字号小于 16 px，或者输入框字号小于 16 px，导致聚焦时页面自动放大。
常见问题
WebViewGold 会自动处理安全区域吗？
会，默认如此。autoAdjustSafeAreaInsets 让页面保持在安全区域内，状态栏使用您配置的颜色。只有在做全屏沉浸式设计时，才需要改为用 CSS 手动处理。
我可以只发布 iPhone 版来避免 iPad 方面的问题吗？
可以在 Xcode 中把目标设备限定为 iPhone。Apple 仍会在 iPad 上以兼容模式运行该应用，但会把它当作 iPhone 应用来评判。从长远看，做一个合适的平板布局才是更好的办法。
拒审附带的截图显示一个顶部被截断的弹窗。为什么？
用 top: 0 定位的弹窗会忽略状态栏 inset。用 env(safe-area-inset-top) 为弹窗添加内边距，或者保持 autoAdjustSafeAreaInsets 开启，让 WebView 本身从状态栏下方开始。
让您的应用上架商店的三种方式
结果相同，只是您需要投入的工作量不同。三种方式都附带审核通过保证和 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 详情 服务提供方：
冬季特惠价格有效期至 2026年12月31日。