html - iOS Web App Splash Screen not loading -
i've been trying splash screen web app appear on ios devices. when load app after adding home screen white screen , nothing loads. if move meta tags below icons , splash screens app load fine splash screen not load. icons work devices no matter code is.
below code have @ moment:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!--ios icons--> <link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0b1qgf0628vprfjztzdq5ne1fb3j3bnlsltjxvk93ymdizlrdtzfpaxjowne1vflwvlzpavu/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120" /> <link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0b1qgf0628vprfjztzdq5ne1fb3j3bnlsltjxvk93ymdizlrdtzfpaxjowne1vflwvlzpavu/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152" /> <link href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0b1qgf0628vprfjztzdq5ne1fb3j3bnlsltjxvk93ymdizlrdtzfpaxjowne1vflwvlzpavu/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180" /> <!--ios splash screens--> <!--iphone 5--> <link rel="apple-touch-startup-image" href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0b1qgf0628vprfjztzdq5ne1fb3j3bnlsltjxvk93ymdizlrdtzfpaxjowne1vflwvlzpavu/default-portrait@2x~iphone5.jpg" media="(device-width: 320px) , (device-height: 568px) , (-webkit-device-pixel-ratio: 2)"/> <!--ipad, landscape--> <link rel="apple-touch-startup-image" href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0b1qgf0628vprfjztzdq5ne1fb3j3bnlsltjxvk93ymdizlrdtzfpaxjowne1vflwvlzpavu/default-landscape~ipad.png" media="(device-width: 768px) , (device-height: 1024px) , (orientation: landscape) , (-webkit-device-pixel-ratio: 1)"/> <!--ipad retina, landscape--> <link rel="apple-touch-startup-image" href="https://baea7f48c88acedc0f88adbf93a90554fa064d59-www.googledrive.com/host/0b1qgf0628vprfjztzdq5ne1fb3j3bnlsltjxvk93ymdizlrdtzfpaxjowne1vflwvlzpavu/default-landscape@2x~ipad.png" media="(device-width: 768px) , (device-height: 1024px) , (orientation: landscape) , (-webkit-device-pixel-ratio: 2)"/> the reason long href includes google drive links because have site on google dive testing purposes. represents website address.
<--edit-->
here code looks have renamed of files , moved them. noticed google drive address not needed.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- iphone icon --> <link href="app icon/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> <!-- ipad icon--> <link href="app icon/apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> <!-- iphone (retina) icon--> <link href="app icon/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> <!-- ipad (retina) icon--> <link href="app icon/apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> <!-- iphone splashscreen--> <link href="images/apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iphone (retina) splashscreen--> <link href="images/apple-touch-startup-image-640x920.png" media="(device-width: 320px) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- ipad (portrait) splashscreen--> <link href="images/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) , (orientation: portrait)" rel="apple-touch-startup-image"> <!-- ipad (landscape) splashscreen--> <link href="images/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) , (orientation: landscape)" rel="apple-touch-startup-image"> <!-- ipad (retina, portrait) splashscreen--> <link href="images/apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) , (orientation: portrait) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- ipad (retina, landscape) splashscreen--> <link href="images/apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) , (orientation: landscape) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> the icons work fine on device try app on. splash screen still not work.
there 1 page says hello world!. when added home screen icon works splash screen not.
as per marconi's answer on mulitple “apple-touch-startup-image” resolutions ios web app (esp. ipad)?, try these splash screen meta tags instead: (you'll still need iphone 6 & 6 plus tags)
<!-- iphone splashscreen--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iphone (retina) splashscreen--> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iphone 5 (retina) splashscreen--> <link href="apple-touch-startup-image-640x1136.png" media="(device-width: 320px) , (device-height: 568px) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- ipad (portrait) splashscreen--> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) , (orientation: portrait)" rel="apple-touch-startup-image"> <!-- ipad (landscape) splashscreen--> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) , (orientation: landscape)" rel="apple-touch-startup-image"> <!-- ipad (retina, portrait) splashscreen--> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) , (orientation: portrait) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- ipad (retina, landscape) splashscreen--> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) , (orientation: landscape) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> updated demo:
<!-- ipad retina portrait startup image --> <link href="//placehold.it/1536x2008.png" media="(device-width: 768px) , (device-height: 1024px) , (-webkit-device-pixel-ratio: 2) , (orientation: portrait)" rel="apple-touch-startup-image"> <!-- ipad retina landscape startup image --> <link href="//placehold.it/1496x2048.png" media="(device-width: 768px) , (device-height: 1024px) , (-webkit-device-pixel-ratio: 2) , (orientation: landscape)" rel="apple-touch-startup-image"> <!-- ipad non-retina portrait startup image --> <link href="//placehold.it/768x1004.png" media="(device-width: 768px) , (device-height: 1024px) , (-webkit-device-pixel-ratio: 1) , (orientation: portrait)" rel="apple-touch-startup-image"> <!-- ipad non-retina landscape startup image --> <link href="//placehold.it/748x1024.png" media="(device-width: 768px) , (device-height: 1024px) , (-webkit-device-pixel-ratio: 1) , (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iphone 6 plus portrait startup image --> <link href="//placehold.it/1242x2148.png" media="(device-width: 414px) , (device-height: 736px) , (-webkit-device-pixel-ratio: 3) , (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iphone 6 plus landscape startup image --> <link href="//placehold.it/1182x2208.png" media="(device-width: 414px) , (device-height: 736px) , (-webkit-device-pixel-ratio: 3) , (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iphone 6 startup image --> <link href="//placehold.it/750x1294.png" media="(device-width: 375px) , (device-height: 667px) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iphone 5 startup image --> <link href="//placehold.it/640x1096.png" media="(device-width: 320px) , (device-height: 568px) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iphone < 5 retina startup image --> <link href="//placehold.it/640x920.png" media="(device-width: 320px) , (device-height: 480px) , (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iphone < 5 non-retina startup image --> <link href="//placehold.it/320x460.png" media="(device-width: 320px) , (device-height: 480px) , (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
Comments
Post a Comment