[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: How to cater for iPhoneX/XS/XR new status bar height?

I'm going to throw it out there that adding something like

@media (os-platform:"IOS") AND (application-dpi: 480) 
        s|Application { 
                osStatusBarHeight: 132;

would break some older non notch phones - and not work with some new notch

Anyone feel free to chime in and correct me - this is all new to me!

Take the example of any of iPhone 6 Plus, iPhone 6S Plus, iPhone 7 Plus or
iPhone 8 Plus.

These phones all have a DPI of 401. That means that it's DPI bucket is 480
(see here 
making them @3x devices. However they have no notch, so are 20pt for the
status bar in the OS. The above CSS if implemented will therefore allocate
132 for this device (as it's IOS and 480 dpi bucket), however it should only
have 20pt x @3x = 60 pixels. So the value of osStatusBarHeight will be too
large for these phones with the above CSS.

Now take an opposite extreme - the iPhone XR. This has a 326 DIP placing it
in the 320 DPI bucket making it @2x. This device requires 44pt x @2x =
88pixels for the status bar - however this will not be met using current /
proposed style rules as most @2x phones have no notch and are rated at 20pt
x2 = 40 pixels (where as 88 pixels are needed in the XRs case).

There are too many ‘exceptions’ when trying to use os-platform and
application-dpi (and even screen sizes of x and y) in styles to set

Two solutions I see are

a) in the contentCreationComplete handler for the main application place:

       var applicationCSS:CSSStyleDeclaration =

Note currently Air is unable to get the OS status bar height, so an ANE is
used here. There have been requests to get AIR to implement the status bar

The above will work for any future phone. This is what I have done and it
works a treat.

b) if not using an ANE, use AIRs 'Capabilities.os' value to check the phone
model being used - then use hardcoded lookup table of phone model-to-status
bar heights to populate the value of
applicationCSS.setStyle("osStatusBarHeight", ...). The issue here - each
time a new phone is released, your code has to be updated with the new
status bar heights.

Interested to hear others thoughts on this....

Sent from: