iOS 9 status bar meta tag and startup image links not working
Asked Answered
L

2

32

Since updating my iPhone 5s to the iOS 9 beta trial, I have found that the status bar styling meta tag, and the startup images on my standalone web app have stopped working. It was working perfectly fine in iOS8 so I'm a bit confused. I'm hoping this is just a bug that will get fixed with the final release, but I though I would see if anyone has any other suggestions to what might be causing this.

Any ideas people?

        <head>
            <meta charset="utf-8">
            <!-- Viewport -->
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta name="mobile-web-app-capable" content="yes">
            <!-- Status bar styles -->
            <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
            <!-- Telephone format detection -->
            <meta name="format-detection" content="telephone=no">
            <!-- Title -->
            <meta name="apple-mobile-web-app-title" content="My App">Stat
            <title>My App</title>

            <!-- Path to Library CSS-->
            <link rel="stylesheet" href="../resources/font-awesome-4.3.0/css/font-awesome.min.css">
            <link rel="stylesheet" href="../resources/bootstrap-3.3.5-dist/css/bootstrap.min.css">
            <link rel="stylesheet" href="../resources/jasny-bootstrap/css/jasny-bootstrap.min.css">

            <!-- Path to your custom app styles-->
            <link rel="stylesheet" href="../css/app.css">

            <!-- Favicons -->
            <link rel="icon" type="image/png" href="http://jupix.com/wp-content/themes/jupix/images/favicons/favicon-32x32.png" sizes="32x32">
            <link rel="apple-touch-icon-precomposed" sizes="57x57" href="http://jupix.com/wp-content/themes/jupix/images/favicons/apple-touch-icon-57x57.png">
            <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://jupix.com/wp-content/themes/jupix/images/favicons/apple-touch-icon-72x72.png">
            <link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://jupix.com/wp-content/themes/jupix/images/favicons/apple-touch-icon-120x120.png">
            <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://jupix.com/wp-content/themes/jupix/images/favicons/apple-touch-icon-144x144.png">
            <link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://jupix.com/wp-content/themes/jupix/images/favicons/apple-touch-icon-152x152.png">

            <!-- Startup images -->
            <link rel="apple-touch-startup-image" href="media/img/startup/iphone-6-plus.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
            <link rel="apple-touch-startup-image" href="media/img/startup/iphone-6.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)">
            <link rel="apple-touch-startup-image" href="media/img/startup/iphone-5.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">

        </head>
        <body>
            <div>HTML Goes Here</div>
            <!-- Scripts -->
            <script type="text/javascript" src="../resources/jquery-1.11.3/jquery-1.11.3.min.js"></script>
            <script type="text/javascript" src="../resources/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="../resources/jasny-bootstrap/js/jasny-bootstrap.min.js"></script>
            <script type="application/javascript" src="../resources/fastclick-master/lib/fastclick.js"></script>
            <script type="text/javascript" src="../resources/bouncefix.js-master/dist/bouncefix.min.js"></script>
            <script type="text/javascript" src="../js/app.js"></script>
        </body>
    </html>
Lanta answered 17/7, 2015 at 8:39 Comment(2)
This issue still persists in the final version of iOS 9. According to this thread in the Apple Developer Forums, it has not been fixed yet. I filed bug report #22735996 describing this issue.Whitehorse
Any updates on this annoying issue?Crackpot
Z
3

https://forums.developer.apple.com/thread/9819: Finally works on 9.2 beta 1

Zurheide answered 5/11, 2015 at 14:58 Comment(3)
I have read this a few times, but the issue persists for me in 9.2.1. Anybody else having the same issue still?Befog
Is this still an issue in 9.3?Nailbrush
I have read that it's not, but I am experiencing that it is. No matter what value I provide for apple-mobile-web-app-status-bar-style, I get the same results. This is maddening. Come on Apple.Befog
H
3

This bug persists in iOS 9 according to Apple Developer Forums. https://forums.developer.apple.com/thread/9819 and it's closed https://github.com/nolimits4web/Framework7/issues/531

Homily answered 14/10, 2015 at 21:41 Comment(1)
Any updates on this? Very annoying to have status bar still visible on the mobile versionCrackpot
Z
3

https://forums.developer.apple.com/thread/9819: Finally works on 9.2 beta 1

Zurheide answered 5/11, 2015 at 14:58 Comment(3)
I have read this a few times, but the issue persists for me in 9.2.1. Anybody else having the same issue still?Befog
Is this still an issue in 9.3?Nailbrush
I have read that it's not, but I am experiencing that it is. No matter what value I provide for apple-mobile-web-app-status-bar-style, I get the same results. This is maddening. Come on Apple.Befog

© 2022 - 2024 — McMap. All rights reserved.