Goal
Add splash screen to IOS's Add2Home/PWA.
Implementation
I think my implementation is a quite collective agreed solution:
use media attribute to find the splash screen that would fit the resolution size of the device and applying it.
I uses this generator I found online to generate the code that fit in the <head> as well as the splash-screen image itself.
Research
Many other website such as this one uses similar implementation. The problem is they don't work(I'm using iphoneXR running IOS 15.0.1).
additional attempts that failed
- using base64 Image.
- adding
<meta name="apple-mobile-web-app-capable" content="yes"> - restarting the device
- using other device(simulator) (briefly)
some resource that I checked(I might still missed something)
- countless so page(lost)
- apple docs(lost) -apple forums(lost)
- iOS PWA splash screen?(so)
- Nuxt pwa is not displaying splash screens on ios devices(so)
- Splash screen in Create-React-App(so)
My code
<head>
...
<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="splash_screens/9.7__iPad_Pro__7.9__iPad_mini__9.7__iPad_Air__9.7__iPad_landscape.png">
...(there's a bunch of them)
<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="splash_screens/10.9__iPad_Air_landscape.png">
<meta name="apple-mobile-web-app-capable" content="yes">
...
</head>
I hosted my code here in case any of you want to check it out.
Lastly, here's my full-source code for the site(splash screen implementation starts from line3.)
PLEASE HELP! I spent a whole day researching already. any help would be really appreciated.
