Android/windows phone splash screen for webpages added/pinned to start bar

208 Views Asked by At

I added a webpage to start screen and now i'm trying to add a splash screen for android and windows phone devices. For iphone i found the code and it works:

<!-- iOS 8 iPhone 6 Plus (portrait) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" />
  <!-- iOS 8 iPhone 6 Plus (landscape) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" />
  <!-- iOS 8 iPhone 6 (portrait) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 8 iPhone 6 (landscape) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-710x1334.png" media="(device-width: 375px) and (device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 & 7 iPad (retina, portrait) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 & 7 iPad (retina, landscape) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 iPad (portrait) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" />
  <!-- iOS 6 iPad (landscape) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" />
  <!-- iOS 6 & 7 iPhone 5 -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-1136x620.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 & 7 iPhone 5 -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 & 7 iPhone (retina, landscape) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-960x600.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 & 7 iPhone (retina, portrait) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
  <!-- iOS 6 iPhone (landscape) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-480x300.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" />
  <!-- iOS 6 iPhone (portrait) -->
  <link rel="apple-touch-startup-image" href="/new-meta/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" />

How can I add a splash screen for the added/pinned to start webpages? Does anyone know, i searched also the google dev docs about android and did not find a thing :(

Thanks Regards Mihai

1

There are 1 best solutions below

2
On

As far as I know, Android and WindowsPhone doesn't currently support the whole web app mode like iOS does, with the custom launch icon, splash screen, and app running full screen. From what I've seen, you have to do a native app wrapper to get that, which is a shame.

I'd love it if someone would prove me wrong on that. :D