What is the 'safe region' for iPhone X (in pixels) that factors the top notch and bottom bar?

Question

I have read the Human Interface Guidelines for iPhone X and it doesn't specifically state the 'safe region' (area which caters for both top notch and bottom bar on the iPhone X). I would like to know the pixel dimensions of this region, including the dimensions removed from the top and bottom.

Solution 1

In Portrait

• Top: 44pt
• Bottom: 34pt
• Left/Right: 0pt

In Landscape

• Top: 0pt
• Bottom: 21pt
• Left/Right: 44pt

Solution 2

By printing the safe area insets of the current window with the following code, you can get the point dimensions of the top and bottom safe area.

if #available(iOS 11.0, *) {
    UIApplication.shared.keyWindow?.safeAreaInsets
    // ...
}

In portrait, the top area is 44 points long and the bottom area is 34 points in length.

Since iPhone X has a @3x resolution, the top area is 132 pixels long and the bottom area is 102 pixels in length.

Solution 3

Xcode 9 introduced safe-area layout guides into the interface builder. You can turn them on by going into your storyboard's file inspector and ticking the checkbox labelled "Use Safe Area Layout Guides"

From there whenever you add constraints to your root view, you get the option of constraining it to the safe area instead. In this photo, the view in orange is constrained to the edges of the safe area while the view in blue is constrained to the edges of the superview.

• Orange view's frame: (0.0, 44.0, 375.0, 734.0)
• Blue view's frame: (0.0, 0.0, 375.0, 812.0)

From there we can calculate that 44 points were used for the top safe area while 34 points were used for the bottom area.

Comments

[Pablo Martinez]

How do you know in pixels that is 44? When I call to safeareainsets.top it gives me 88

[Pablo Martinez]

How do you know in pixels that is 44? When I call to safeareainsets.top it gives me 88

[Adam Haafiz]

@PabloMartinez the reason you are getting 88 pixels is because you have a navigation bar in your UI. The safe area layout guide is guaranteed to not be unobstructed by any other UI element such as a navigation bar or a tab bar. For more info, check out Auto Layout Techniques in Interface Builder from this year's WWDC.

[Deepak Sharma]

Do you have similar picture for landscape mode?

[Deepak Sharma]

Ok so where is the status bar in this mode supposed to be?

[Adam Haafiz]

@DeepakSharma from what I can see on the simulator, it's not shown at all when you're in landscape mode.

[Ric Moore]

So iPhoneX screen is 1125x2436. The blue represents this and is 375x812. This is exactly 1/3 of the full resolution. Therefore 44x3 = 132 pixels from the top and the safe area is 375x734 x3 = 1125x2202. (This is for portrait).

[chichilatte]

You've said 44 pixels for the top and 34 pixels for the bottom. You probably mean points, not pixels?

[Adam Haafiz]

@chichilatte you're absolutely right. I've edited the answer accordingly. Thanks

[Igor Vasilev]

Actually, it is 21pt on the bottom in Landscape, not 24pt

[Basil Mariano]

is this constant value in every device with a notch?

[MoOx]

Nope, you should either usesafeAreaInsets (prop from UIViewController) if you are coding an iOS or any lib that can help with that (for react-native/web github.com/th3rdwave/react-native-safe-area-context)

[Tamás Sengel]

@PabloMartinez stackoverflow.com/questions/46376860/…