how to properly use the fullscreenmode and screen scaling

[Colin Holgate]

No comment about the main code you showed, but what you said about showAll isn’t quite right. All of the card will always be visible. On devices wider than the horizontal ratio of the card, extra content will be revealed from off of the left and right of the card, the height of the card will fill the height of the device screen. On devices that are a narrower ratio than the horizontal ratio of the card, extra content is revealed from off of the top and bottom of the card, the width of the card will fill the width of the device screen. No combination should ever crop into the card area.

The easiest way to use showAll is to have all of the important things within the card window, then have enough extra stuff off all edges. Until recently I would make the card window be 16:9, and have enough content above and below the card to cope with iPad. That approach worked well for all devices from iPhone 5 to iPad (16:9 to 4:3, using landscape as an example). With the super wide recent Samsung phones (and Pixel 3 too), and the even wider iPhone X, the ratio gets as high as 19.5:9.

Now my approach is to have a 16:9 card, extra content up to 4:3 as before, but now extra content off the left and right to reach a ratio of 20:9. My typical 16:9 size is 1024x576, and 20:9 gives a familiar looking 1280x576.

So, card window of 1024x576 and all important objects within that space, extra background above and below the card, to give 1024x768, and extra content off the left and right to give 1280x576. You could of course have backgrounds that are 1280x768, that would do no harm. The parts in the corners will never be seen.

On top of all that you may well want to place some things using code, but remember that the later Android phones, and the iPhone X, have a notch, so don’t place things at the far left center of a landscape app.