IONIC for iphone6 and iPhone 6 Plus. Can I show more content in iPhone6 as it has larger screen

I think that some apps are optimized for the iPhone 6 screen, so they can show more information rather than just zooming the screen.
Can I do that using Ionic?

1 Like

Do we have any method to acheive this for iOS. App on android scales autmatically. :grin:

1 Like

Yes, this is driving me crazy too!

On Android, the app grows nicely to fit any screen. If the screen size is bigger (i.e., more pixels) then more information is displayed. That is, the pixels themselves are not scaled, rather, the app “window” grows.

But on iOS, it almost looks like the pixels themselves are scaled larger! So you get the same amount of information on the screen. It’s very sad.

Halp!

1 Like

Hey man, did you figure out how to fix this? I’m having the same issue :confused:

Can one of you post screen shots? No one else is really having the issue.

Make sure you’re updated to the latest cordova and targeting iOS 8 or higher otherwise iOS will automatically scale the app up because the builds for lower iOS devices don’t know that a higher resolution exists

Here is the screenshot, @NorthMcCormick
I’m targeting iOS 8.2 and it still scale up everything.

Are you up to date on cordova too? If you’re stuck on a version around 3ish, it’s probably too old

@NorthMcCormick, I’m using Cordova 5.1.1. The app looks perfect on Ionic View, it’s when I build and send it to test flight that some settings may have changed. Is there anything I can do on Xcode to force it to be retina-ready?

This is kind of a stretch, but it might do the trick. Can you use Ionic Resources to generate your splash screens for iOS and see if that fixes it?

Doing some reading: iOS determines whether to scale an app by the resources it has. So if you don’t have a @3x resource for the launch image it assumes the app is not ready to be rendered at the full resolution.

http://ionicframework.com/docs/cli/icon-splashscreen.html

If you need some help with that.

@NorthMcCormick, that was a great try, but didn’t work. The Ionic Resources didn’t generate any @3x image, just the standard @2x. Is it right?

Thank you very for your help so far.

Yeah it’s weird this is being so tough. I remember just doing something easy.

Can you try removing the iOS platform and re-adding it if you haven’t already?

It could be something cached

@NorthMcCormick, I found out that the splash images were there but with the wrong name (whitout @3x), I renamed it and I’ll try again as soon as I fix this insane bug about arm64, did anyone ever got this?

I’m using Azure Notification Hub (not by choice, I have to use it :confused: ) and it doesn’t have 64bits support.

Finally i got this working :smile:

Steps:

  1. Add all splash screens with correct names and resolution. I have added required splash screen details below.
  2. Remove platform/ios folder
  3. Update phonegap using npm update phonegap
  4. Rebuild iOS platform --> phonegap build ios
  5. If you are using splash screen phonegap plugin then you have to update that plugin also. For that you have to remove that plugin and add it again.
  6. All set it will work perfectly

Required images name and resolution.

  1. Default-568h@2x~iphone.png 640 Ă— 1136
  2. Default-667h.png 750 Ă— 1334
  3. Default-736h.png 1242 Ă— 2208
  4. Default-Landscape-736h.png 2208 Ă— 1242
  5. Default-Landscape@2x~ipad.png 2048 Ă— 1536
  6. Default-Landscape~ipad.png 1024 Ă— 768
  7. Default-Portrait@2x~ipad.png 1536 Ă— 2048
  8. Default-Portrait~ipad.png 768 Ă— 1024
  9. Default@2x~iphone.png 640 Ă— 960
  10. Default~iphone.png 320 Ă— 480
1 Like

Haha we love 64 bit! You have to have it. I’m not familiar with that library. Is it open source?

Thanks @shashwattripath and @nnnnnorthhhhh, I’m pretty confident that this will work, I just need to fix my current bug and I’ll test it, thanks a lot!

@nnnnnorthhhhh, yeah, this is open source, and this is the error I’m getting:

ld: warning: ignoring file EyedentifyApp/Plugins/msopentech.azure.NotificationHub/WindowsAzureMessaging.framework/WindowsAzureMessaging, missing required architecture arm64 in file EyedentifyApp/Plugins/msopentech.azure.NotificationHub/WindowsAzureMessaging.framework/WindowsAzureMessaging (3 slices)
Undefined symbols for architecture arm64:
  "_OBJC_CLASS_$_SBNotificationHub", referenced from:
  objc-class-ref in NotificationHub.o
ld: symbol(s) not found for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

The weird thing is, I was able to build this app last week, and I didn’t change anything related to this NotificationHub.

I fixed this by removing the plugin using cordova and adding it using grunt (I’m using ionic-generator for yeoman), not sure if it fixed some path problems or if it just updated the plugin, anyway, it’s working now :smile:

About the splash screens, I manually renamed it, but when I build, the old ones are created again (without the @3x). When checking on xCode, the images are not there, not even the original ones (Default-736h.png).

I’ll follow @shashwattripath advice and report.

Oh good haha. I’ve had to re-compile some older libraries with x64 enabled then re-add them… Complicated, but it works for some of them.

And thanks @shashwattripath for the detailed steps, much appreciated

1 Like

So @shashwattripath didn’t work here. I don’t know why it doesn’t pick up the right images by default.
What I did to make it work was to enable the Asset Catalog and manually drag and drop the right images from there.
It’s a painful process to get it right with the names and sizes, but works :smile:

Nice to know that your problem is solved :smile: .
I too tried using your approach, but it didn’t worked. Finally ended up rebuilding iOS platform, which solved my issue.

7 years later.

Honestly, I am not much familiar with IONIC can you explain to me in short how it works, and also is it available for the new iPhone 14 pro Max. is it an alternative to coding on mobile. seeking the attention of the community expert.