fix: viewport safe-area-inset for iOS PWA + disable pinch zoom

Topbar (avatar, network indicator) was hidden behind iOS status bar
in standalone PWA mode. Added safe-area-inset-top padding to topbar.
Disabled user-scalable to prevent accidental zoom.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Gros Frumos 2026-03-21 16:40:30 +02:00
parent 6e2503dc3f
commit cb89a90771
3 changed files with 3 additions and 2 deletions

View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="description" content="Emergency signal button"> <meta name="description" content="Emergency signal button">
<!-- PWA meta tags --> <!-- PWA meta tags -->

View file

@ -59,6 +59,7 @@ body {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 16px 20px; padding: 16px 20px;
padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
flex-shrink: 0; flex-shrink: 0;
} }

View file

@ -1,6 +1,6 @@
'use strict'; 'use strict';
const CACHE_NAME = 'baton-v3'; const CACHE_NAME = 'baton-v4';
// App shell assets to precache // App shell assets to precache
const APP_SHELL = [ const APP_SHELL = [