Safe area overlap
Fixed headers under the status bar or Dynamic Island, bottom tabs under the home indicator, modals cut off at the top. Fix with the insets below.
What 4.0 expects
Section 4 covers design. Apple expects apps to be useful and intuitive and to follow the Human Interface Guidelines; a reviewer rejects under 4.0 when the interface is of insufficient quality: clipped content, overlapping system UI, controls that are too small, layouts that do not fit the device, or an experience that clearly was not made for a phone. It is a judgment call, so the rejection text usually contains a screenshot with a red circle, which tells you exactly what to fix.
For web-wrapped apps the root causes are predictable: the page ignores the safe areas, buttons were designed for a mouse, breakpoints stop at tablet width, and the iPad gets either a stretched phone layout or the desktop site with tiny type.
The four 4.0 complaints for web apps
Tap targets
Links and icons smaller than 44 by 44 points, menus that need hover, checkboxes at 14 px. Enlarge in CSS, add padding, drop hover-only states.
Desktop UI on a phone
Sidebars, data tables with horizontal scroll, 12 px text, cookie banner over the fold, footer with forty links. Hide or rebuild for small screens.
iPad layout
A phone layout stretched to 13 inches, or the desktop site with content hugging one edge. Give the tablet its own breakpoint or restrict the app to iPhone; see iPad support for web-wrapped apps.
Fix safe areas with WebViewGold settings and CSS
Decide who handles the insets
By default
autoAdjustSafeAreaInsetsis true: WebViewGold keeps your page between the status bar and the home indicator, andstatusBarBackgroundColor,darkModeStatusBarBackgroundColorandstatusBarTextColorpaint the status bar in your colors. This alone fixes most header overlaps.Edge-to-edge design: hand insets to CSS
For content behind the status bar, set
transparentStatusBarto true andautoAdjustSafeAreaInsetsto false, add viewport-fit=cover to your viewport meta tag, and pad fixed elements with env(safe-area-inset-top) and env(safe-area-inset-bottom) as in the snippet below.Quick fix for the home bar
If your bottom navigation sits under the home indicator and you cannot change the site today, set
bottombarto true withbottombarBackgroundColor(andiPadBottombarif needed). WebViewGold adds a native bar below the page. Documentation: modify the safe area.Or use the native navigation footer
Set
showNavFooterto true and define the tabs in FooterBar.json. A native tab bar respects the safe area by design and makes the app feel like an app, which also helps with Guideline 4.2.Enlarge tap targets with app-only CSS
Add rules to
custom.cssin the WebViewGold project; they apply only inside the app, so the website stays untouched (custom CSS docs). Aim for 44 px minimum height and width on buttons, tabs and icon links.Remove browser artifacts
Set
preventZoomto true (no accidental pinch),preventoverscrollto true (no rubber-band gap above your header) anddisablecalloutto true (no link preview on long press). Setorientationipadto what your layout supports.
With a good optimized version of your web app you can have a stunning mobile app within a couple of minutes. Additionally to that the customer service is very nice and very helpful! I can just recommend WebViewGold :-)
Safe-area and tap-target CSS
Put this in custom.css (app-only) or your global stylesheet. The viewport meta tag in your HTML head needs viewport-fit=cover for the env() values to be non-zero.
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; }Desktop tells that reviewers screenshot
- Navigation that opens on hover; on iOS the first tap opens, the second navigates, and nothing feels right.
- Tables wider than the screen with horizontal scrolling instead of cards.
- A cookie consent dialog or "Download our app" banner on the first screen of the app.
- Text below 16 px for body copy, or inputs below 16 px that trigger zoom on focus.
Frequently asked questions
Does WebViewGold handle safe areas automatically?
Yes, by default. autoAdjustSafeAreaInsets keeps the page inside the safe area and the status bar takes your configured color. You switch to manual CSS handling only for edge-to-edge designs.
Can I ship iPhone-only to avoid the iPad complaint?
You can restrict the target to iPhone in Xcode. Apple still runs the app on an iPad in compatibility mode, but then judges it as an iPhone app. A proper tablet layout is the better long-term answer.
The rejection shows a screenshot of a modal cut off at the top. Why?
Modals positioned with top: 0 ignore the status bar inset. Pad the modal with env(safe-area-inset-top) or keep autoAdjustSafeAreaInsets on so the WebView itself starts below the status bar.
Three ways to get your app into the stores
Same result, different amount of work on your side. All three come with the approval guarantee and 24/7 human support.
Do it yourself
$109 per platform, one-time
The WebViewGold license: a finished Xcode or Android Studio project. Paste your URL, set name and icon, switch on features, build and submit. Free updates forever.
See plans on the main pageCloud Builder
$349 per license, one-time add-on
No Mac, no Xcode, no Android Studio: configure in the browser, we build both apps in the cloud and hand them to App Store Connect and the Play Console.
How the Cloud Builder works Try the free demoFull Service
$698 per platform $798
Send us your URL and icon. Our team configures, builds and delivers your app within 72 hours, white-label, with source projects. Both platforms for $1,158.
Full Service details Powered by
Winter Sale prices valid until December 31, 2026.