iPhone X

Hi guys,

I was testing my app on the iPhone X and this what I got:

As you can see the top label is cut.

My question is if you will support this phone for the apps that like mine have a fullscreen and gets cut.

Something like you have for different designs on Android and iOS but for iPhoneX.

Thanks in advance.

The Human Interface Guidelines state specifically where you should not be putting things. It looks like your app, even if it runs in fullscreen, could use a StatusBarBackground docked to the top right there.

Hi, i’ve a similar issue, but adding a statusbarbackground won’t solve this for our app. Is there a way we can add some additional margin if device is a iphoneX? Or based on the viewport height of some kind?

Thanks in advance

Hi Uldis,

After applying the StatusBarBackground I got this:

Top:

Top

Bottom:

Bottom

Unfortunately, too much space goes to waste with this solution.

Update, i’m currently using the device plugin to check for model if model is iPhone10,3 or iPhone10,6 it’s a iphone X and i can add some additional margin.

info@ruudvanham.nl wrote:

Update, i’m currently using the device plugin to check for model if model is iPhone10,3 or iPhone10,6 it’s a iphone X and i can add some additional margin.

Which device plugin? fuse-device?

Ana Almeida wrote:

info@ruudvanham.nl wrote:

Update, i’m currently using the device plugin to check for model if model is iPhone10,3 or iPhone10,6 it’s a iphone X and i can add some additional margin.

Which device plugin? fuse-device?

Sorry, forgot the link, but that’s the one indeed!
list of iOS devices found at: List of Apple's mobile device codes types a.k.a. machine ids (e.g. `iPhone1,1`, `Watch1,1`, etc.) and their matching product names · GitHub

Only downside, if Apple adds another iPhoneX with a different device code we’ve to update the app.

Small detail, the iPhoneX simulator shows the device code of the parent device. For example “x86_64” for my MacBook.