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.

Supranatural

Answer 1

In Portrait

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

In Landscape

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

Khosrow

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

is this constant value in every device with a notch? – Dedrick

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) – Khosrow

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

Jinx

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

@PabloMartinez #46377360 – Anatola

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

Enteron

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

@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. – Enteron

Do you have similar picture for landscape mode? – Peadar

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

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

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). – Cacophony

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

@Pastiche you're absolutely right. I've edited the answer accordingly. Thanks – Enteron

Answer 4

You can get it from safeAreaInsets property of a view in a UIViewController.

Plasmosome

Answer 5

You don't need to call the singleton UIApplication, can get them also from your view layout.

self.view.safeAreaInstes. (top,bottom,left.right)

Floury