Martin Bauer
8ddfafebcb
iOS starts an installed web app at the manifest's start_url ("/"), so the
query parameter was dropped. Opened with ?parentMode=1, the page now points at
a second manifest whose start_url keeps it, and names the app "Musik Eltern".
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
58 lines
2.7 KiB
HTML
58 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<!-- viewport-fit=cover so the sea reaches under the rounded corners and the home
|
|
indicator - edge-anchored elements clear them with the --safe-* insets;
|
|
user-scalable=no because a pinch-zoom on a big pink play button is a misfire. -->
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no"
|
|
/>
|
|
<title>Musik Delphin</title>
|
|
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<meta name="theme-color" content="#0d2f3c" />
|
|
<meta name="description" content="Musik und Hörbücher für die MusicMouse" />
|
|
|
|
<!-- iOS takes start_url from the manifest, but the title, icon and status bar from
|
|
these tags. -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-title" content="Musik" />
|
|
<!-- A home-screen install starts at the manifest's start_url, not at the address it
|
|
was added from, so `?parentMode=1` would be lost. Opened with it, the page offers
|
|
a second manifest whose start_url keeps it - "Add to Home Screen" from a parent's
|
|
URL installs the parents' app, under its own name. Inline, so the tags are
|
|
switched before anything reads them. -->
|
|
<script>
|
|
if (new URLSearchParams(location.search).get("parentMode") === "1") {
|
|
document.querySelector('link[rel="manifest"]').href = "/manifest-parents.webmanifest";
|
|
document.querySelector('meta[name="apple-mobile-web-app-title"]').content = "Musik Eltern";
|
|
document.title = "Musik Delfin Eltern";
|
|
}
|
|
</script>
|
|
<!-- An opaque status bar, so the page starts below it - not black-translucent. That
|
|
one ran the page under the clock, which put every top-anchored control behind
|
|
it unless each remembered its inset, and since iOS 26 it also sizes the app one
|
|
status bar short with an unpaintable strip at the bottom (WebKit bug 301108).
|
|
See "Layout on phones" in README.md. Home-screen installs read this tag once:
|
|
remove and re-add the app after changing it. -->
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<link rel="icon" href="/icon-192.png" type="image/png" />
|
|
<link rel="stylesheet" href="/fonts/nunito.css" />
|
|
<link
|
|
rel="preload"
|
|
href="/fonts/nunito-latin.woff2"
|
|
as="font"
|
|
type="font/woff2"
|
|
crossorigin
|
|
/>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|