How to cater for iPhoneX/XS/XR new status bar height?
What is the recommended method to cater for the new iPhones (X onwards)
statusbar height off 44point rather than 20point?
Currently a flex project on an iPhoneX will have the content /stage
overlapping the the status bar as flex thinks it should be allowing 20point
for the status bar when it should be allowing 44.... obviously flex needs to
be able to detect the device it is running on so it knows whether it should
be allowing 20 (for a device like iPhone 8) or 44 (for a device like iPhone
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 https://flex.apache.org/asdoc/mx/core/RuntimeDPIProvider.html)
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 =
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.