42

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.

OnlyCodeMatters
  • 683
  • 1
  • 5
  • 15

5 Answers5

62

In Portrait

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

In Landscape

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

enter image description here

enter image description here

Bogdan Novikov
  • 565
  • 6
  • 14
MoOx
  • 8,423
  • 5
  • 40
  • 39
  • 2
    Actually, it is 21pt on the bottom in Landscape, not 24pt – Igor Vasilev Jul 17 '18 at 14:20
  • is this constant value in every device with a notch? – Basil Mariano Apr 12 '20 at 13:28
  • Nope, you should either use`safeAreaInsets` (prop from `UIViewController`) if you are coding an iOS or any lib that can help with that (for react-native/web https://github.com/th3rdwave/react-native-safe-area-context) – MoOx May 08 '20 at 12:35
19

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.

Tamás Sengel
  • 55,884
  • 29
  • 169
  • 223
  • 1
    How do you know in pixels that is 44? When I call to safeareainsets.top it gives me 88 – Pablo Martinez Sep 25 '17 at 10:28
  • @PabloMartinez https://stackoverflow.com/questions/46376860/what-is-the-safe-region-for-iphone-x-in-pixels-that-factors-the-top-notch-an/46377355#comment79770787_46377367 – Tamás Sengel Sep 13 '21 at 14:55
9

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.

Adam Haafiz
  • 218
  • 1
  • 8
  • How do you know in pixels that is 44? When I call to safeareainsets.top it gives me 88 – Pablo Martinez Sep 25 '17 at 10:28
  • 2
    @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](https://developer.apple.com/videos/play/wwdc2017/412/) from this year's WWDC. – Adam Haafiz Sep 25 '17 at 13:38
  • Do you have similar picture for landscape mode? – Deepak Sharma Oct 30 '17 at 11:29
  • Ok so where is the status bar in this mode supposed to be? – Deepak Sharma Oct 30 '17 at 17:25
  • @DeepakSharma from what I can see on the simulator, it's not shown at all when you're in landscape mode. – Adam Haafiz Oct 31 '17 at 16:01
  • 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). – Ric Moore Nov 09 '17 at 11:56
  • You've said 44 pixels for the top and 34 pixels for the bottom. You probably mean points, not pixels? – chichilatte Mar 02 '18 at 15:20
  • @chichilatte you're absolutely right. I've edited the answer accordingly. Thanks – Adam Haafiz May 20 '18 at 07:01
0

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

Enrico Susatyo
  • 19,372
  • 18
  • 95
  • 156
0

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

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

Alejandro L.Rocha
  • 961
  • 6
  • 13