0

I have two iPads that I'm developing on. One is an iPad air, the other is an iPad Retina 4th Gen. When I upgraded to iOS 8.1 on both, my web app was showing the status bar at the bottom. So I added the following code from iOS 8: web app status bar position and resizing problems:

<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

This fixed the problem on my iPad Air. But the retina device was showing a black status bar. So, I tried this:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>

This fixed the issue on the retina device, but now my iPad air is showing a narrow black bar at the bottom of the screen (see images).

Why is there a difference between these devices, both on iOS 8? How do I find a solution for both? Do I detect the device model and add corresponding lines using if else? Is there a more elegant way?

Users are using iPad 4 right now, but could upgrade any time, causing a mix of Airs and 4s. So I need a solution that works on both. Also, this is a web app built on JavaScript and AngularJS + HTML5. iPad air UI

iPad Retina UI

Community
  • 1
  • 1
nikjohn
  • 20,026
  • 14
  • 50
  • 86
  • i think you should check if user is using ipad air or ipad 4th gen. Check this answer http://stackoverflow.com/questions/448162/determine-device-iphone-ipod-touch-with-iphone-sdk/1561920#1561920 – LS_ Nov 03 '14 at 07:38
  • Users are using iPad 4 right now, but could upgrade any time, causing a mix of Airs and 4s. So I need a solution that works on both. Also, I should've mentioned, this is a webapp built on JavaScript and AngularJS + HTML5. – nikjohn Nov 03 '14 at 08:02

1 Answers1

0

You need to remove and re-add your webapp to your home screen after setting the status bar to "black-translucent"

aLiEnHeAd
  • 579
  • 1
  • 7
  • 20