App auto scaling on iPhone 6 and 6+ screens?

  • 10
  • Question
  • Updated 4 years ago
  • Answered
Any clues on how to stop the app auto scaling on iPhone 6 and 6+ screens?
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 10
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Good question! I haven't tried this myself yet, because I failed to queue up for such new device last week. [And even if I had queued up, they wouldn't have given me one of those devices, based upon my empty wallet]

When running in Scaled Mode, i.e. without the new LaunchImages, the screen is 320 x 568 points, which is the iPhone 5 native size. This basic view size will then be scaled up on a new iPhone6(+).
However, if I understand the docs correctly, when using lauch images (splash screens) of the new @3x size, the iPhone6 should run without scaling.
Try it (and please, report back if this works as expected). The new splash sizes are:
Retina HD 5.5 (iPhone 6 Plus) 1242 x 2208
Retina HD 4.7 (iPhone 6) 750 x 1334

With all these icons and splash screens, our apps are rapidly growing in size. It would be nice if Storyboards could be used with PGB.
http://oleb.net/blog/2014/08/replacin...
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
That's Petra but no luck. I added the new splash sizes and my app is still displaying in scaled mode :-(
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
I was able to deactivate the scaling mode using this in my config file:

UILaunchImageMinimumOSVersion
8.0
UILaunchImageName
Default-667h
UILaunchImageOrientation
Portrait
UILaunchImageSize
{375, 667}

UILaunchImageMinimumOSVersion
8.0
UILaunchImageName
Default-736h
UILaunchImageOrientation
Portrait
UILaunchImageSize
{414, 736}

But I still don't know how to use with my own custom splash images.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Are you saying that you managed to deactivate scaling mode, but now your splash images for that size don't appear?
- Which splashes DO appear, then?
- Are you sure you included the large splash screen images correctly in your config.xml and stored them physically in your collection of files that are uploaded to PGB?
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
yes exactly, it's doesn't work if you just add the new sizes in the config.xml as so (image attached):

Using the method that deactivates the scaling doesn't seem to use any splash screen (appears black and then a flash of white before the app loads) as it's looking for the png files in the root directory and I don't believe I can put files in the root directory using Phonegap Build?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Why would it be looking for the splashes in the root? You specified /content/img/, so you should store the new images in that directory. If you wish, you can store them in the root, but then you must specify accordingly in your config.
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
Sorry that wasn't clear. So the attached image shows how I can disable the auto-scaling in the config.xml. using this method I believe that the png files must be in the root directory of the iOS app.

Phonegap Build appears to put everything inside a directory called 'www' so I'm not sure how I can add files to the root directory?

Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
So adding this to my config.xml in PGB will stop scaling my apps on iPhone 6 and iPhone 6 plus?
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
We wish that was true, but no, not until PGB gets updated to support it. If you make your iOS builds using XCode then you can do it, but not in PGB yet. Watch this thread and our awesome friends at Adobe will probably update PGB with this sometime soon.
(Edited)
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
I have posted a temporary solution: http://community.phonegap.com/nitobi/.... Hope it helps until the update.

Too bad the guys at phonegap didn't forsee this issue, but they still rock!
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
> ...sometime soon.

Probably, yes. %-/
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Ah, thanks. Now I understand.
I can't check where PGB puts the launch images in the final .ipa right now, but since they are supposed to be at the top-level of the bundle ("Launch images must be PNG files and located at the top-level of your bundle, or provided within each .lproj folder if you localize your launch images."), I must assume that this is where PGB puts them.

If you have an .ipa file handy, you might check yourself by opening it up (rename to .zip extension and unzip).
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
PGB seems to copy the splash images to the root directly (image attached) but all of my files are in the 'www' directory. I don't think there is a way for me to manually put anything in the root directory on an iOS app?

Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Well, excellent.
I think it works like this: in your config, you define where the source files are. Then, PGB will copy them to the root of the IPA. Unused files will not be included in the IPA when a .pgbomit file is included.
So, you should be able to store your 667-/736-splashes in /content/img/, define your config as shown and write your config-file directive exactly as you did. Yes, as if the files are already in the root. It looks very much like that should work!
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
Unfortunately PGB doesn't appear to copy the 667-/736-splashes from /content/img/ to the root.

PGB must look for specific sizes, rename and copy the files to root. So maybe the new sizes are ignored and not copied because they are not required for iOS 7 <
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
That would be possible (and unfortunate). This might be an excellent moment for PGB staff to chime in and confirm or correct all this.
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
Yes I'm surprised more people aren't concerned about turning off the auto scaling.

Thanks for your help!
Photo of John Weidner

John Weidner, Champion

  • 435 Posts
  • 80 Reply Likes
Slightly off topic - but when you don't have the proper sized "splash" screens set up, you end up with the default phonegap robot image displayed. It would be nice if there was a way of configuring that default.
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
It would be nice if there was a way of configuring that default.


From the PGB docs:
The default splash must be named splash.png and must reside in the root of your application folder.

<gap:splash src="splash.png" />
Photo of John Weidner

John Weidner, Champion

  • 435 Posts
  • 80 Reply Likes
Thanks. I had placed mine in a "splash" directory with all my other splash screens and specified it as being there using a gap:splash element. After moving it to the root and updating the configuration, the PGB robot screen went away!
Photo of ismael jimoh

ismael jimoh

  • 4116 Posts
  • 192 Reply Likes
Hi All,

To answer this, if this doesn't work currently, it's due to the fact we haven't configured the servers to support it.

This should be coming soon though.

@Adam that's fast seem you are one of the early beds to get the new devices.

Hope it helps.

Update you all when we have more news.
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
This is great. I think you kind folks have gotten the right pieces onto the table. When the PGB team updates for this, then this should be a great solution. We are very excited about being able to run our PhoneGap app on the iPhone 6 and 6 Plus without scaling mode because our app pertains to financial/expense information and as such has a lot of information that needs to be displayed. Any additional screen real estate is MUCH appreciated by our end users. We use JQuery Mobile and that library does a fine job with making everything touch friendly, in fact maybe a bit too touch friendly. So having our app display with what appears to be smaller fonts/images, etc., and fitting more content onto the larger screen will be preferable by most if not all of our end users, especially those who have shelled out the cash and upgraded to either of these new iPhones. I'll be sourcing one soon, probably just the 6, not the plus because I have already gone the phablet route for a few months and then returned to the 5.0" screen size as optimal! Thanks for listening, and for all your hard work everyone!
Photo of Clemens Lermen

Clemens Lermen

  • 17 Posts
  • 1 Reply Like
Any news on that Splashscreen Issue?
Photo of Alan Neveu

Alan Neveu, Champion

  • 213 Posts
  • 11 Reply Likes
Can we get an update from someone at PGBuild on this?

Many of us are now using iPhone 6 and 6 Plus devices for development and this is important to us.
Photo of Jack Smith

Jack Smith

  • 3 Posts
  • 0 Reply Likes
I just found the answer today and worked just perfect:

"To disable this up-scaling in your pre-iOS 8 apps and achieve native resolutions, add a Launch Screen File to your project. (A Launch Screen File is just a storyboard file/NIB that will replace the old static launch images.)"

https://www.codefellows.org/blog/3-th...

This is a tutorial how you add constrains:
https://www.youtube.com/watch?v=3to5m...
Photo of Phillip Moon

Phillip Moon

  • 1 Post
  • 0 Reply Likes
Hi Jack Smith,

That solution is great if you are not using PhoneGap Build to compile the app. PhoneGap Build is in desperate need of support iPhone 6 and iPhone 6 Plus splash screens so it doesn't scale up the app.

Cheers,
Phillip Moon
Photo of Jack Smith

Jack Smith

  • 3 Posts
  • 0 Reply Likes
I understand. I've never used PhoneGap Build to compile the apps. Always use a Mac. This way I can tweak my application from XCODE (like fixing the status bar on IOS 7 & 8 or changing the color for my Webview). Hope you find a solution soon.

Regards
Photo of Harris Rodgers

Harris Rodgers

  • 1 Post
  • 0 Reply Likes
Any updates on this? I'm still unable to use phonegap build and avoid autoscaling.
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
Hey guys, as you say it looks like PGB is missing support for the new iPhone 6 resolution. We're looking into this now and will update / fix asap.
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
Amazing news. Thanks Ryan!
Photo of vespino

vespino

  • 132 Posts
  • 3 Reply Likes
+1
Photo of ryan

ryan, Developer

  • 1538 Posts
  • 132 Reply Likes
OK we've added support for the new icons, please try it out. You'll need to add the appropriately sized image files, as well as adding the new splashes to your config.xml:

<gap:splash src="res/screen/ios/Default-667h@2x.png" gap:platform="ios" width="750" height="1334" />
<gap:splash src="res/screen/ios/Default-Portrait-736h@3x.png" gap:platform="ios" width="1242" height="2208" />
<gap:splash src="res/screen/ios/Default-Landscape-736h@3x.png" gap:platform="ios" width="2208" height="1242" />

Here is a demo app including the new icon support. Note that this is only supported on 3.6.3 and above.
Photo of Adam Johnson

Adam Johnson

  • 15 Posts
  • 0 Reply Likes
PS. I complied the Barcode demo in Phonegap Build then unzipped the .ipa to check if the new splash sizes were in the root and they were not.

Thank you Ryan!