olemd/tilfluktsrom
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases 16 Packages Wiki Activity Actions

PWA: iOS-hjemskjermhint, kompass-feilmelding og zoom-fiks

Browse source 
- Fjern maximum-scale/user-scalable på viewport slik at siden kan
  zoomes (WCAG 1.4.4). Leaflet håndterer gestikk på kartet selv.
- Legg til Apple-meta-tagger for standalone-modus og statuslinje.
- Vis engangsbanner på iOS Safari om å legge til på hjemskjerm,
  siden iOS ikke støtter beforeinstallprompt.
- Gi tydelig statusmelding når bruker avslår kompasstilgang i
  stedet for å stille reversere til kartmodus.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-04-20 13:22:21 +02:00
commit 42c28df102
8 changed files with 124 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
pwa/index.html
View file

@ -2,9 +2,16 @@
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- WCAG 1.4.4 Resize Text: do not pin maximum-scale or disable user-scalable.
Leaflet handles its own touch gestures on the map; the rest of the page
(status bar, bottom sheet, dialogs) must remain zoomable for low-vision users. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#1A1A2E" />
<meta name="description" content="Find the nearest public shelter in Norway" />
<!-- iOS home-screen/PWA integration: run in standalone mode, dark status bar, correct label. -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Tilfluktsrom" />
<meta http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https://*.tile.openstreetmap.org; connect-src 'self' https://*.tile.openstreetmap.org; font-src 'self'; worker-src 'self'" />
<title>Tilfluktsrom</title>