Screen Resolution in iOS Apps


#1

No matter what I specify my window in the “class” tab’s initial height and initial width of the Projucer, I can’t seem get the simulated version to match up with the GUI editor version. I’m trying to test on iPhone 7+, which is 1920 x 1080. If I use this, the simulator version is way off. I also read about the scaling, but don’t know how that affects it. Any tips on how to just have the simulator and real version, reflect the exact same size as the JUCE GUI editor?

Thanks


#2

https://www.paintcodeapp.com/news/iphone-6-screens-demystified

The Ultimate Guide To iPhone Resolutions
https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions


edit
The easiest way is to display the window in in full screen and use the FlexBox class for layout


#3

Also be careful that you are not missing launch images or that your launch images have the wrong size. JUCE will use whatever UIScreen returns:

Best to avoid LauchImages altogether and rather use launch storyboards if you can.


iOS screen sizes, iPhone X
#4

I came across that article, but I wasn’t understanding which resolution they were insinuating that we use. I must be missing something extremely critical because I’ve tried every resolution on the page under the iPhone 7+ and nothing translates correctly even remotely.


#5

So the size that JUCE will use on iOS for a fullscreen window is:

Desktop::getInstacne().getDisplays().getMainDisplay().totalArea

So try setting the width&height to the above in the GUI editor.


#6

I found the setFullScreen(true) function call and placed it in the main window section and this does what I wanted, but I have no idea how to make this reflect in the GUI editor, so the GUI editor no longer reflects the same dimensions of the full screen app, which makes placing items a guessing game.


#7

To know which size you should set your component to in the GUI editor, print out the width and height of:

Desktop::getInstacne().getDisplays().getMainDisplay().totalArea

while your running your program.


#8

WOW, I finally understood what you meant, my apologies! I printed out the screen dimensions and found it to be 320 by 568, perfect! Next step (down the road) will be to figure out scalable GUIs, but this is perfect for right now. Thank you!


#9

Coming back to this app after some time…

So I ran my code in a few different simulators of different iPhones with different dimensions, to see how my GUI would look. Much to my surprise, the GUIs perfectly fit all the models I ran it on. I didn’t do any coding to make the GUI scalable, is this some coincidence or a thing JUCE does automatically for iOS builds?

Or maybe my understanding of the simulator isn’t that great, I’m assuming its running the GUI exactly how it would if it were on that specific device. At any rate, they look correct on iPhones 5 through 7, yet I didn’t do anything specific to make it scalable.


#10

@fabian
What’s the workflow with regard to projucer when it comes to this? Once we’ve made our iOS export from Projucer, just stop using Projucer for project file management and stick with xcode entirely?