Apple mobile status bar behaves different on two iOS 8 iPads - ipad

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.

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

Related

iOS - Keyboard suggestions bubble is wrongly hidden behind keyboard

In our iOS App the suggestions bubbles get hidden behind the keyboard. How can I prevent that from happening?
This appears to be an Apple bug in iOS 9 for iPhone 6/6+ class phones running under iPhone 5 compatibility mode, i.e., there are no launch images or other indicators to iOS that the app supports the larger screens of the iPhone 6/6+ class of phones, so it runs the screen as if it were an iPhone 5 class phone, with main view 568 high. The fix or workaround is to add native iPhone 6/6+ support to your app by adding in launch images for each of those phone sizes. The problem will go away. At least it has in my cases.

iOS app not displaying correctly iPad

I am working on an App which should be able to run on iPhones and iPads.
I have been able to run it on iPhones and it is displaying perfectly. But when I run it on an iPad the App itself is very zoomed in. I am not sure what main issue.
This is how it displays on iPad:
And this is how it comes up on an iPhone:
Any idea how to fix it or what the issue is?
Your app isn't made to run on the iPad. When displayed on the iPad, it just stretches the display of the iPhone version (you can see that by the 1x button on the lower right corner of the screen). You need to setup your XCode project as a Universal App (instead of it being just for iPhone) and then you'll be able to take advantage of the entire iPad screen and design the display especially for it.
You can set the app as Universal on your project properties in XCode:

Phonegap + iphone 6 screen size issue

I'm using phonegap / cordova with AngularJS to create a mobile app.
I'm testing the application in chrome debugger and simular all iPhones 4-6 plus, the layout stretch itself automatically and everything looks good.
when i'm running the application on iPhone 6 i get 2 black strips at the bottom and at the top of the app and the application size is small and not covering the whole screen.
Did it happen to anyone? how did you solve it?
Attached example image.
Have a look at this:
Black bars showing when running app on iOS 7 (4 inch retina display)
This helped when I had this issue on iPhone 5, seems to solve iPhone 6 as well.

Black Borders in Adobe Air IOS

My application on IOS created with Adobe Air is displaying random black bars on the top and bottom of the screen using an iPhone 5 and all other 4-inch devices.
I have exported the same app on Android, Desktop and HTML and the aspect ratio is rendered correctly. I've also tried changing the stage dimensions to match the iPhone's screen resolution to no avail.
I have enabled high resolution in Adobe Flash CS5 and also targeted the iPhone exclusively. My render method is direct, and yet nothing seems to make the borders disappear. This is what it looks like:
I also tried creating a blank Adobe Air project, and the bars still come up regardless.
I have used Adobe Air SDK 3.2, 3.4, and the latest SDK and nothing works. What is happening?
You need to use the proper launch image for the device you're on. See here and here:
iOS lauch image specs

iOS 7 black splash bug and app launch size

Currently I am having troubles with a project I am working on.
First of I have this bug. Where the splash screen on iOS 7 is black when I set a splash screen for iOS 7 devices. The tip which I found there (and which works) is to only set splash screens voor iOS 6 and it will fetch those for iOS 7.
However, when doing this the app launches as an 3.5" app on an 4" device on iOS7. (The splash screen is full size).
I have tried using the old methods to have splash screens (e.g with correct naming conventions) and not using the Image Catalogs, but this doesn't change anything.
What can I do to have and a working splash screen on iOS 7 devices and the correct launch size for those devices?
It might be worth noting that this is a Universal app.
Have you tried to use a new project and set all image sizes?
There could be a problem with your Info.plist after changing the splash images many times.

Resources