iPhone 5 black bars due to new screen size

  • 9
  • Problem
  • Updated 5 years ago
  • In Progress
Along with many of you, my app that is built using PhoneGapBuild 2.0.0 does not use the full height of the iPhone 5 display. It has two black bars of 88 pixels high surrounding it, with my app centered vertically.

I see the posts on StackOverflow talking about how to include an additional splash screen image of 640x1136 and naming it Default-568h@2x.png. Here is a link to the post I am referring to:

http://stackoverflow.com/questions/12...

I made a splash screen of this name and dimensions, and also included this line in my config.xml:

<gap:splash src="images/Default-568h@2x.png" gap:platform="ios" width="640" height="1136"/>

But the resulting app still shows the black bars on iPhone 5. Has anyone successfully resolved this using PhoneGap 2.0.0? Or is this something that is coming with 2.1?
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes

Posted 8 years ago

  • 9
Photo of Hardeep Shoker

Hardeep Shoker

  • 1941 Posts
  • 89 Reply Likes
Hey Alan,

This issue stems from the fact that we do not yet handle iPhone 5 splash screens.

I've logged and issue, hopefully we can have this resolved soon.

Here is the tracked issue:

https://github.com/phonegap/build/iss...

Hardeep Shoker
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Is it something that is independent of PhoneGap 2.1 or 2.2 itself, and just something that will belong to PhoneGapBuild? That's what it seems like to me because I have the iPhone5 simulator running and it shows my app using the full screen using PhoneGap 2.0. So it has to do with the packaging of the app during the PhoneGapBuild process.

In case it helps, here are a few things I have tried... I created a version of my splash screen that is 640x1136 and tried to reference it in config.xml using the element shown in my original post. That didn't work. Then I also put a copy of that image in the root of my www directory and that didn't work either. I don't know what specific detail has to happen from here, but perhaps this helps.

I'll watch this thread on GetSatisfaction - is this where I should be watching for an update on this? Or should I follow this on the github issue?
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
Alan, how did you get your iphone5 simulator to use the full screen? I've put a Default-568h@2x.png in the www folder but its still letterboxing.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
In the simulator go into Hardware / Device and then select iPhone Retina 4 inch (rather than 3.5 inch).
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
Hi Alan thanks for the response, I was already using the iphone retina 4inch simulator, that wasn't the issue. I solved my problem, look at my post at the bottom of the page.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Is there any chance that we can have this addressed when PG 2.1 support is added to PGBuild? Perhaps that would be a natural time to introduce this due to any needed enhancements to config.xml to handle iPhone 5 splash screen resolution/size.
Photo of Oscar Abilleira Muñiz

Oscar Abilleira Muñiz

  • 157 Posts
  • 5 Reply Likes
Totally agree with this idea...
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
More information... Including an image called Default-568h@2x.png in my images directory breaks the BlackBerry build process. So that seems like one more wrinkle that will have to be addressed when this issue is tackled.
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
Hi, I am using the command-line tools to run my app in the ios device simulator. The problem is that it displays it in a letterbox in the 4 inch simulator. My xCode is 4.5.1 and phonegap 2.1.

I have tried the solution of including a Default-568h@2x.png in the root of the www folder but still doesn't solve the issue. Am I supposed to put that somewhere else? or maybe reference it with a link tag? I do not know of a way to deploy my app with a config.xml when using the command line tools. Is that even possible?
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
I figured it out.

For all those that don't like to use xCode for any stage in development and just use the phonegap command line tools to build and run your app;

Unfortunately, just adding the Default-568h@2x.png to the root of www won't solve the issue. You will have to open the built project in xCode (after using the ./create command from phonegap command line tools) and manually set the splash screen of iphone-4inch in the build settings of your target under 'Launch Images'. Then save your project and re run the cordova/debug and cordova/emulate commands from your built project.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Yep, and that is what we cannot do using just PhoneGap Build. So we are waiting for Hardeep and others to enhance PGBuild so that we can specify that file using config.xml. In the process of trying to rig it, we found out the following tricky things:

1) Including all these big .png files makes BlackBerry builds fail due to a size restriction that they imposed in 1997 and have never modified. The contents of the www directory can only be something like 2 MB because all programs will always be less than 2 MB. (Sorry for the saracasm, I just long for the day that a BB device is only a museum piece...)

2) Including a file with a name that includes the @ character breaks BlackBerry builds. (Again, longing....)

So whenever the PGBuild team gets around to dealing with this issue, we are hoping that these tricky aspects can be dealt with under the hood, probably by stripping out that file when a BlackBerry build is made.
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
Lucky for me, I do not support blackberry. 2MB is pretty ridiculous though.

Anyway, yes we need this resolved for the phonegap build asap.
Photo of gauthee

gauthee

  • 9 Posts
  • 0 Reply Likes
Hi,

Is there a solution yet for this issue in iPhone5. Mentioning PhoneGap version as 2.1 fails all builds in PhoneGap Build.

Is there a solution without using PhoneGap build?
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
You would have to go ahead and use the individual tools of each platform to build your apps e.g use XCode for iOS app etc..
Photo of Hardeep Shoker

Hardeep Shoker

  • 1941 Posts
  • 89 Reply Likes
Hey All,

I just spoke with Andrew today 2.1.0 should work for iOS. There may be a few quirks/bugs here and there.

Can you give the builds another shot, let me know if something breaks for you and we will address the issue for you.

Please note that the new splash screens are still not supported.
That issue is being tracked here: https://github.com/phonegap/build/iss...

Hardeep Shoker
Photo of austin.h.lee

austin.h.lee

  • 10 Posts
  • 0 Reply Likes
Hardeep, can you confirm you've seen the activity below? Haven't heard from you in a bit and I wonder if you have marked this issue as resolved in your tracking system when it is not for us (see below).

Thanks,
Austin
Photo of Dustin Brown

Dustin Brown

  • 10 Posts
  • 0 Reply Likes
Hardeep, can you confirm that someone is working on this and possibly provide a timeline? We are dead in the water on this launch until this bug is fixed.
Photo of Geoffrey Blake

Geoffrey Blake

  • 3 Posts
  • 0 Reply Likes
Save us Hardeep!
Photo of Amit Parnerkar

Amit Parnerkar

  • 6 Posts
  • 0 Reply Likes
I just tried 2.1.0 and I still see the black bars top and bottom for iPhone5. I see those for all the screens irrespective of splash or not. Please help.

My app is in review with Apple. I am thinking may be I can quickly fix and upload another binary before they reject.
Photo of Dustin Brown

Dustin Brown

  • 10 Posts
  • 0 Reply Likes
I'm still seeing the letter-boxing of my app as well using phone gap build and phone gap 2.1.0. Any solutions?
Photo of austin.h.lee

austin.h.lee

  • 10 Posts
  • 0 Reply Likes
Chiming in to say I am having the same issue...when can we expect an update to Build so that we can submit our app?

Thanks!
Photo of traeregan

traeregan

  • 13 Posts
  • 0 Reply Likes
Please let us know when you think you will get iPhone 5 working with PhoneGap Build.
Photo of Joost Baaij

Joost Baaij

  • 1 Post
  • 0 Reply Likes
Is there anything we can do? Is there some kind of open source component we can help with? It's quite a pressing issue for me.
Photo of austin.h.lee

austin.h.lee

  • 10 Posts
  • 0 Reply Likes
This is the only article I've seen that talks about the letterboxing issue in iOS 6 and iPhone 5: http://www.mobilexweb.com/blog/iphone...

The solution he found for WebApps was this: "As weird as it sounds, you need to forget about the viewport with width=device-width or width=320. If you don’t provide a viewport, it will work properly. "
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
I just tried making a build using this for the viewport:

{meta name="viewport" content="width=320.1"}

and I am asking one of our testers to try it out with the iPhone 5 (I am still using a 4S myself...). I will report back either way with the test results.
Photo of austin.h.lee

austin.h.lee

  • 10 Posts
  • 0 Reply Likes
Looking forward to what you find Alan
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
That didn't work. I also tried this:
{meta name="viewport" content="user-scalable=no, width=320, height=548"}

and that didn't work either.
Photo of Mohan

Mohan

  • 2 Posts
  • 0 Reply Likes
Any updates about this issue for phonegap build?
Photo of austin.h.lee

austin.h.lee

  • 10 Posts
  • 0 Reply Likes
This is incredibly frustrating.

Can someone from PhoneGap Build please confirm that this critical bug is your highest priority? I can't imagine there is a more pressing issue than preventing your customers from submitting their app to the App Store (we've been delayed over a week at this point).

Also, can you provide an estimate for when this issue will be resolved? This will let us know if we need to abandon the Build platform or if we should stick it out.
Photo of Dustin Brown

Dustin Brown

  • 10 Posts
  • 0 Reply Likes
I second that. It is looking like the need to abandon the service is drawing near.
Photo of Milo Jasper

Milo Jasper

  • 18 Posts
  • 0 Reply Likes
Agreed. This needs to be solved asap!
Photo of austin.h.lee

austin.h.lee

  • 10 Posts
  • 0 Reply Likes
For any other paying support members, FYI I have similar thread in the tenderapp forum: http://phonegap.tenderapp.com/discuss...

Feel free to chime in there if you have access as well
Photo of Dustin Brown

Dustin Brown

  • 10 Posts
  • 0 Reply Likes
Any word on this??? I have to have an app build today. If we don't hear anything in the next few hours I am going to have to start configuring my local build environments. I don't see myself going back to online building after I have to break everything out. Any update would be appreciated. Even knowing somebody was working on this would help.
Photo of traeregan

traeregan

  • 13 Posts
  • 0 Reply Likes
Please give us some kind of update!
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
I hate to say this guys but this week Apple is probably going to be announcing an iPad mini with yet another screen size. That makes me wonder if the folks at PGBuild are waiting for that so that they can address this issue once for both new screen sizes. Just a hunch.

I sent an e-mail to a contact I have at Adobe, just informing him this is a festering issue and asking if he can put a sticky note on someone's monitor in the next cube block over. Might help.
Photo of Geoffrey Blake

Geoffrey Blake

  • 3 Posts
  • 0 Reply Likes
How is this issue still outstanding? This is causing us a major delay in our product launch. Sigh.
Photo of Mohan

Mohan

  • 2 Posts
  • 0 Reply Likes
This is surprising. No communication at all. I wonder if ppl working on PG B know if this thread exists!
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Here is an unofficial update on this thread.... My contact at Adobe said that he would see what he can do about letting the right person know that this issue is festering. I am under the impression there was an unusual circumstance that was in the way, and that it is cleared up now. So it should take a day or two for a backlog to get cleared up. Also, I'm pretty sure Adobe employees are all PST timezone, so give them until later on in the day. And finally, be sure to watch a live blog of Apple's big release today (at 10:00 AM PST, 1:00 PM EST) and take note of the screen resolution of the new iPad mini.

Hang tight gang. If you are relying on PhoneGap Build, sit back for a few and recognize the benefits that this service brings to you as it will help put this inconvenience into perspective.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
And here's one more thing... All you people who have a serious need for this to be resolved (myself included)... Please spend 30 minutes searching the web and trying to see if anyone else has solved this with other development/build environments, and see if you can find some helpful information on what PhoneGapBuild might need to know in order to fix this for us. It might be that one of us will come across just the right piece of information that will make it easy for them to fix it quickly.

Also, for those who like a real challenge... We know that when using XCode we can get our PhoneGap apps to display properly in the simulator. Now see if you can dig into the underlying config files and such like things in your XCode project and figure out what is different between the broken (letterboxed) configuration and the working (no letterbox) configuration. If you can nail it down to a section of a config file or something, that will really help the PhoneGapBuild team so that they will be able to resolve this quickly.
Photo of gauthee

gauthee

  • 9 Posts
  • 0 Reply Likes
Hi All,

The issue was solved when using XCode to build the application however with few minor issues. So, first, we created a new cordova project in XCode and copied all our html files in www folder. For the build to work we have to include the cordova.js for iOS versions and reference it. When we included cordova 2.0. our app failed to work however it worked when included 2.1 version. And as other forums suggest we have to include the new default image with the suggested dimensions for iPhone5. With these changes the splash/default image got loaded and the app also utilized the full width and height of the iphone 5 device. (we tested on actual device)

Now the minor issue is that, we see two splash images are loading, one with the new size but the other with older device dimensions and when this happens we see white background at top and bottom (this all happens in a second!). This two images load didnt happen when we used the same images for native iOS application!
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Hi Gauthee,

You are talking about using PhoneGap to make an app using XCode, and then shipping your app to Apple straight from XCode. We are talking about using PhoneGap Build. The problem here is that PhoneGap Build does not presently have the mechanism to create a build that does whatever magic takes place under the hood in XCode to show the app using the full iPhone 5 screen.