iPhone 6 Plus blows up apps?

  • 1
  • Question
  • Updated 6 years ago
I just got my new iPhone 6 Plus and apps I have made using PGB seem to be blown up. Is this something I can fix or will this be fixed by Phonegap?
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
  • confused

Posted 6 years ago

  • 1
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi,

I will assume fixed on our side.

We haven't released an official support for the new size for iPhone Devices.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Is there a way to fix this on my side for now? The statusbar is blown up, which is not something that can be done with PGB, can it?



Is there a forecast on new releases?
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi,

Use the new Statusbar Plugin.

It should fix issues with Status Bar.

You can then look at this for your body section.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
This one: https://build.phonegap.com/plugins/505? What is the difference with https://build.phonegap.com/plugins/715? I'm using the first one in my apps (39151 and 90833 for example).

Thanks for the link!
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Solved the blowing up of the content:

if(device.platform=="iOS") {
//set viewportScale
models={'iPhone7,1':'0.85', 'iPhone7,2':'0.925'};

if(device.model in models) {
$('#viewport').attr('content', 'user-scalable=no, initial-scale='+models[device.model]+', minimum-scale='+models[device.model]+', maximum-scale='+models[device.model]+', width=device-width');
}
}

7.1: iPhone 6 Plus
7.2: iPhone 6

http://theiphonewiki.com/wiki/Models

You must also use the following in config.xml:

Works for my, but hope jQuery Mobile will fix this. The statusbar I guess is still something for the Phonegap guys.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Hmm, it looks like your config.xml code did not make it because it is markup. Can you please comment again and paste it with some other character swapped for the < and > characters? Or you could use their HTML equivalents. Thanks!
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Are you referring to my comment?
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Yes, in which you wrote, "You must also use the following in config.xml: " and then there is no text following.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Aha, I see... well it shoul be:

< preference name="EnableViewportScale" value="true" / >

Remove the spaces at the beginning and end.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Your solution works well, but I think the calculations are not correct. iPhone6 is 375 pixels wide, so 320/375 = .8533. iPhone 6 Plus is 414 pixels wide, so 320/414 = .7729.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Thanks, but I hope Phonegap will bring their own solution soon because mine has its flaws.
Photo of Asfahaan Mirza

Asfahaan Mirza

  • 5 Posts
  • 0 Reply Likes
Hi there. where do i add the code that you have suggested?

Thanks,
Asfahaan
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
You don't, you add the splashscreens according to the documentation: http://community.phonegap.com/nitobi/...
Photo of GoMobile Events

GoMobile Events

  • 3 Posts
  • 0 Reply Likes
For those of you having a problem with iPhone6 and 6+ showing the older iphone sizes (letterboxed and stretched). Here's a fix. You need additional splash sizes in your config.xml....

These are used as launch images (https://developer.apple.com/library/i...) and are required to allow the app to scale to the full size of your iphone 6/6+.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
I'm very curious to how you solved this, especially since the guys at Phonegap say their process doesn't support other splashscreens then iPhone 4 and 5.
Photo of GoMobile Events

GoMobile Events

  • 3 Posts
  • 0 Reply Likes
<!-- <gap:splash src="Default.png" gap:platform="ios" width="320" height="480" />
<gap:splash src="Default@2x.png" gap:platform="ios" width="640" height="960" />
<gap:splash src="Default-568h@2x.png" gap:platform="ios" width="640" height="1136" /> -->

This is the code that was being stripped from the comments
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
These are iPhone 4 and 5 images, not 6. I have tested with iPhone 6 images and nothing happens. The images are not even added to the ipa file.
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
Do you mean adding these images will make my solution obsolete? I guess not, since I have tested with these images in place. It only results in the app being marked as optimized for iPhone 6 and iPhone 6 plus in the AppStore.

Am I wrong?
Photo of GoMobile Events

GoMobile Events

  • 3 Posts
  • 0 Reply Likes
Adding the images caused the webview to use the whole screen. It may still look a little scaled up (everyones html code would default to initial-scale=1) so your solution of changing that scale theoretically would alter the size of text etc.
Photo of Nitzan Wilnai

Nitzan Wilnai

  • 2 Posts
  • 0 Reply Likes
There is another way. You can do all this in the XCode Project PhoneGap creates.

This one was created with 3.6.3

In Resources/Images.xcassets
In the right tab window, select the 3rd tab option and select iOS8 and later iPhone.

Here is an image: