29 Replies
      Latest reply: Oct 12, 2017 8:29 PM by gregblass RSS
      ThatGuySam Level 1 Level 1 (0 points)

        Hi there,

         

        I've recently made a website that is Mobile WebApp compatible, however for some reasons the startup screens don't display while the app is launching.

        It worked in iOS 8. Have I done something wrong or is this a known bug?

         

        Here is my code:

        
            <!-- META TAGS START -->
           
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
            <!-- Chrome & Firefox OS -->
            <meta name="theme-color" content="#2196f3">
            <!-- Windows Phone -->
            <meta name="msapplication-navbutton-color" content="#2196f3">
           
           
            <!-- META TAGS END -->
           
            <!-- APPLE MOBILE WEB APP TAGS START -->
           
            <!-- CONFIGURATION -->
           
            <!-- Allow web app to be run in full-screen mode. -->
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="mobile-web-app-capable" content="yes">
           
            <!-- Make the app title different than the page title. -->
            <meta name="apple-mobile-web-app-title" content="Cloud Craft">
           
            <!-- Configure the status bar. -->
            <meta name="apple-mobile-web-app-status-bar-style" content="black-transparent">
           
            <!-- Set the viewport. -->
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
           
            <!-- Enable automatic phone number detection. -->
            <meta name="format-detection" content="telephone=yes">
           
            <!-- ICONS -->
           
            <!-- iPad retina icon -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-152x152.png" sizes="152x152" rel="apple-touch-icon-precomposed">
           
            <!-- iPad retina icon (iOS < 7) -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-144x144.png" sizes="144x144" rel="apple-touch-icon-precomposed">
           
            <!-- iPad non-retina icon -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-76x76.png" sizes="76x76" rel="apple-touch-icon-precomposed">
           
            <!-- iPad non-retina icon (iOS < 7) -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-72x72.png" sizes="72x72" rel="apple-touch-icon-precomposed">
           
            <!-- iPhone 6 Plus icon -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed">
           
            <!-- iPhone retina icon (iOS < 7) -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed">
           
            <!-- iPhone non-retina icon (iOS < 7) -->
            <link href="/assets/favicons/apple-touch-icon-precomposed-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed">
           
            <link rel="manifest" href="/assets/favicons/manifest.json">
            <link rel="shortcut icon" href="/assets/favicons/favicon.ico">
            <meta name="application-name" content="Cloud Craft">
            <meta name="msapplication-TileColor" content="#2196f3">
            <meta name="msapplication-TileImage" content="/assets/favicons/mstile-144x144.png">
            <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
            <meta name="theme-color" content="#2196f3">
           
            <!-- STARTUP IMAGES -->
           
            <!-- iPad retina portrait startup image -->
            <link href="/assets/startup/apple-touch-startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
                             and (-webkit-device-pixel-ratio: 2)
                             and (orientation: portrait)" rel="apple-touch-startup-image">
           
            <!-- iPad retina landscape startup image -->
            <link href="/assets/startup/apple-touch-startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
                             and (-webkit-device-pixel-ratio: 2)
                             and (orientation: landscape)" rel="apple-touch-startup-image">
           
            <!-- iPad non-retina portrait startup image -->
            <link href="/assets/startup/apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
                             and (-webkit-device-pixel-ratio: 1)
                             and (orientation: portrait)" rel="apple-touch-startup-image">
           
            <!-- iPad non-retina landscape startup image -->
            <link href="/assets/startup/apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
                             and (-webkit-device-pixel-ratio: 1)
                             and (orientation: landscape)" rel="apple-touch-startup-image">
           
            <!-- iPhone 6 Plus portrait startup image -->
            <link href="/assets/startup/apple-touch-startup-image-1242x2148.png" media="(device-width: 414px) and (device-height: 736px)
                             and (-webkit-device-pixel-ratio: 3)
                             and (orientation: portrait)" rel="apple-touch-startup-image">
           
            <!-- iPhone 6 Plus landscape startup image -->
            <link href="/assets/startup/apple-touch-startup-image-1182x2208.png" media="(device-width: 414px) and (device-height: 736px)
                             and (-webkit-device-pixel-ratio: 3)
                             and (orientation: landscape)" rel="apple-touch-startup-image">
           
            <!-- iPhone 6 startup image -->
            <link href="/assets/startup/apple-touch-startup-image-750x1294.png" media="(device-width: 375px) and (device-height: 667px)
                             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
           
            <!-- iPhone 5 startup image -->
            <link href="/assets/startup/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
                             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
           
            <!-- iPhone < 5 retina startup image -->
            <link href="/assets/startup/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
                             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
           
            <!-- iPhone < 5 non-retina startup image -->
            <link href="/assets/startup/apple-touch-startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
                             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
           
           
            <!-- APPLE MOBILE WEB APP TAGS END -->