Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

ios

iphone-x

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.

like image 691
OnlyCodeMatters Avatar asked Sep 23 '17 06:09

OnlyCodeMatters


People also ask

How many pixels is safe area?

On landscape images, the default safe area is approximately 1750 x 1035 pixels, and on portrait images the default safe area is approximately 874 x 1340 pixels.

How many pixels is the iPhone X notch?

On iPhone Notch Sizes – 512 Pixels.

What is safe area in iOS?

The safe area represents the portion of your screen that is unobscured by bars and other operating system based content. Safe area is pre-defined by iOS across all Apple devices and is present in Android devices as well.

What is the display size of iPhone X?

The iPhone X display has rounded corners that follow a beautiful curved design, and these corners are within a standard rectangle. When measured as a standard rectangular shape, the screen is 5.85 inches diagonally (actual viewable area is less).


2 Answers

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

like image 141
MoOx Avatar answered Sep 25 '22 06:09

MoOx


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.

like image 42
Tamás Sengel Avatar answered Sep 26 '22 06:09

Tamás Sengel