Sotoontech/Vitron-Front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(pwa): add apple-mobile-web-app-capable so iOS applies safe-area insets

Browse Source 
On iOS, apple-mobile-web-app-status-bar-style: black-translucent has no effect
unless apple-mobile-web-app-capable=yes is also set. Without it the installed
PWA never went edge-to-edge, so env(safe-area-inset-top) resolved to 0 and the
header padding did nothing — content ran under the notch. Android was unaffected
(it honors mobile-web-app-capable, which was already present).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Arda Samadi 2026-07-09 11:35:12 +03:30
parent 8b51c3252a
commit b371c50d23
1 changed files with 5 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/root.tsx
View File

@ -136,6 +136,11 @@ export function Layout({ children }: { children: React.ReactNode }) {
/>
<meta name="color-scheme" content="light dark" />
<meta name="mobile-web-app-capable" content="yes" />
{/* iOS-specific: standalone mode. Required for the status-bar-style
below to take effect — without it iOS ignores black-translucent,
so the app isn't edge-to-edge and env(safe-area-inset-top) doesn't
line up with the headers. (Android uses mobile-web-app-capable.) */}
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"