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

classic Classic list List threaded Threaded
5 messages Options
Reply | Threaded
Open this post in threaded view
|

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

Lydecker
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
X).....

Any ideas?
Thanks



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

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

leokan23
Use this in your css to fix it.

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

}

Also add the same for dpi bigger than 480 to cover all new devices. This
also can work for Android phones with notch.



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

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

Lydecker
Hey,

Thanks for the reply and pointing me in the correct direction.

I think you're maths is wrong though....

The iPhoneX has a statusBar height of 44pt. Its the 480dpi bucket which
means it's a @x3 device.

Therefore the statusBar height in pixels should be 44x3 = 132.

Using

    s|Application {
                osStatusBarHeight: 132;
            }

Works great for the iPhone X though....



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

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

leokan23
It could be :) I used this code during debugging so the point part could be
completely wrong.

I suggested to the dev team that this should be updated by default to the
framework as it works for all the new iPhones.



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

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

Lydecker
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
phones.

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
osStatusBarHeight.

Two solutions I see are

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

       var applicationCSS:CSSStyleDeclaration =
styleManager.getStyleDeclaration('spark.components.Application');
                applicationCSS.setStyle("osStatusBarHeight",
com.distriqt.extension.application.Application.service.getStatusBarHeight())

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
height: https://tracker.adobe.com/#/view/AIR-4198633

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: http://apache-flex-users.2333346.n4.nabble.com/