Skip to content

Commit 37a983c

Browse files
RBerguaRBergua
committed
iOS Splash screen all options
1 parent 3f7984d commit 37a983c

1 file changed

Lines changed: 45 additions & 50 deletions

File tree

‎index.html‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -29,56 +29,51 @@
2929
<!-- iOS home screen icon -->
3030
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png">
3131

32-
<!-- iOS: Splash screen for app -->
33-
<script>
34-
const isIOSStandalone = /iphone|ipad|ipod/i.test(navigator.userAgent) && window.navigator.standalone;
35-
if (isIOSStandalone) {
36-
// Read the physical pixel dimensions of the screen.
37-
// We need physical pixels because the splash image must be full-resolution.
38-
const w = screen.width * window.devicePixelRatio;
39-
const h = screen.height * window.devicePixelRatio;
40-
41-
// Create an off-screen canvas at full physical resolution.
42-
// This canvas only exists to generate the image.
43-
const canvas = document.createElement('canvas');
44-
canvas.width = w;
45-
canvas.height = h;
46-
const ctx = canvas.getContext('2d');
47-
48-
// Fill the background black.
49-
ctx.fillStyle = '#000';
50-
ctx.fillRect(0, 0, w, h);
51-
52-
// Load the existing apple-touch-icon.png from the server.
53-
const logo = new Image();
54-
55-
logo.crossOrigin = 'anonymous';
56-
logo.src = '/assets/icons/apple-touch-icon.png';
57-
58-
logo.onload = () => {
59-
// Scale the logo to 75% of the shorter screen dimension (width in portrait).
60-
// Math.max handles non-square icons correctly — the longest side fills the target size.
61-
const size = Math.min(w, h) * 0.75;
62-
const scale = size / Math.max(logo.width, logo.height);
63-
const dw = logo.width * scale;
64-
const dh = logo.height * scale;
65-
66-
// Draw the logo centered on the canvas.
67-
ctx.drawImage(logo, (w - dw) / 2, (h - dh) / 2, dw, dh);
68-
69-
// Register the canvas output as the splash image for the next launch.
70-
// Note: iOS caches this for the NEXT launch — the very first launch after install will show no splash (or a blank one).
71-
const link = document.createElement('link');
72-
link.rel = 'apple-touch-startup-image';
73-
link.href = canvas.toDataURL('image/png');
74-
link.media = `(device-width: ${screen.width}px) and (device-height: ${screen.height}px) and (-webkit-device-pixel-ratio: ${window.devicePixelRatio})`;
75-
document.head.appendChild(link);
76-
};
77-
78-
// Silent fallback — the app still works, just without a splash image.
79-
logo.onerror = () => console.warn('Splash: failed to load apple-touch-icon.png');
80-
}
81-
</script>
32+
<!-- iOS: Splash screens pre-generated for all iPhone device sizes, portraid and landscape. Images generated with: https://progressier.com/pwa-icons-and-ios-splash-screen-generator -->
33+
<link rel="apple-touch-startup-image" media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_17_Pro_Max__iPhone_16_Pro_Max_landscape.png">
34+
<link rel="apple-touch-startup-image" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_17_Pro__iPhone_17__iPhone_16_Pro_landscape.png">
35+
<link rel="apple-touch-startup-image" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_landscape.png">
36+
<link rel="apple-touch-startup-image" media="screen and (device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_Air_landscape.png">
37+
<link rel="apple-touch-startup-image" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_landscape.png">
38+
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_landscape.png">
39+
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_17e__iPhone_16e__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_landscape.png">
40+
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_landscape.png">
41+
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_landscape.png">
42+
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/iPhone_11__iPhone_XR_landscape.png">
43+
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/assets/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_landscape.png">
44+
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_landscape.png">
45+
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_landscape.png">
46+
<link rel="apple-touch-startup-image" media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/13__iPad_Pro_M4_landscape.png">
47+
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/12.9__iPad_Pro_landscape.png">
48+
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/11__iPad_Pro_M4_landscape.png">
49+
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/11__iPad_Pro__10.5__iPad_Pro_landscape.png">
50+
<link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/10.9__iPad_Air_landscape.png">
51+
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/10.5__iPad_Air_landscape.png">
52+
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/10.2__iPad_landscape.png">
53+
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png">
54+
<link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/assets/splash_screens/8.3__iPad_Mini_landscape.png">
55+
<link rel="apple-touch-startup-image" media="screen and (device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_17_Pro_Max__iPhone_16_Pro_Max_portrait.png">
56+
<link rel="apple-touch-startup-image" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_17_Pro__iPhone_17__iPhone_16_Pro_portrait.png">
57+
<link rel="apple-touch-startup-image" media="screen and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_16_Plus__iPhone_15_Pro_Max__iPhone_15_Plus__iPhone_14_Pro_Max_portrait.png">
58+
<link rel="apple-touch-startup-image" media="screen and (device-width: 420px) and (device-height: 912px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_Air_portrait.png">
59+
<link rel="apple-touch-startup-image" media="screen and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_16__iPhone_15_Pro__iPhone_15__iPhone_14_Pro_portrait.png">
60+
<link rel="apple-touch-startup-image" media="screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_14_Plus__iPhone_13_Pro_Max__iPhone_12_Pro_Max_portrait.png">
61+
<link rel="apple-touch-startup-image" media="screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_17e__iPhone_16e__iPhone_14__iPhone_13_Pro__iPhone_13__iPhone_12_Pro__iPhone_12_portrait.png">
62+
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_13_mini__iPhone_12_mini__iPhone_11_Pro__iPhone_XS__iPhone_X_portrait.png">
63+
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_11_Pro_Max__iPhone_XS_Max_portrait.png">
64+
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/iPhone_11__iPhone_XR_portrait.png">
65+
<link rel="apple-touch-startup-image" media="screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/assets/splash_screens/iPhone_8_Plus__iPhone_7_Plus__iPhone_6s_Plus__iPhone_6_Plus_portrait.png">
66+
<link rel="apple-touch-startup-image" media="screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/iPhone_8__iPhone_7__iPhone_6s__iPhone_6__4.7__iPhone_SE_portrait.png">
67+
<link rel="apple-touch-startup-image" media="screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/4__iPhone_SE__iPod_touch_5th_generation_and_later_portrait.png">
68+
<link rel="apple-touch-startup-image" media="screen and (device-width: 1032px) and (device-height: 1376px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/13__iPad_Pro_M4_portrait.png">
69+
<link rel="apple-touch-startup-image" media="screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/12.9__iPad_Pro_portrait.png">
70+
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1210px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/11__iPad_Pro_M4_portrait.png">
71+
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/11__iPad_Pro__10.5__iPad_Pro_portrait.png">
72+
<link rel="apple-touch-startup-image" media="screen and (device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/10.9__iPad_Air_portrait.png">
73+
<link rel="apple-touch-startup-image" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/10.5__iPad_Air_portrait.png">
74+
<link rel="apple-touch-startup-image" media="screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/10.2__iPad_portrait.png">
75+
<link rel="apple-touch-startup-image" media="screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_portrait.png">
76+
<link rel="apple-touch-startup-image" media="screen and (device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/assets/splash_screens/8.3__iPad_Mini_portrait.png">
8277

8378
<!-- Leaflet CSS -->
8479
<!-- If a future version breaks the map, use this link instead: https://unpkg.com/leaflet@1.9.4/dist/leaflet.css -->

0 commit comments

Comments
 (0)