iPhone X 를 가로방향(landscape) 로 회전 시키면, 왼쪽과 오른쪽의 공백 영역이 동일 하지 않습니다.
When an iPhone X is rotated into landscape orientation, the areas available for content on the left and the right of the device are unequal, which means that depending on the absolute orientation of the device and the position of the sensor housing, the horizontal ‘safe areas’ for your site’s content are either
45px wide. Our data suggests that 5–10% of iPhone X users are using landscape orientation. Whether that’s due to the larger screen size or just to see what happens with the sensor housing is up for debate, but I’m glad that they’ll see a well-adapted site when they do.
iOS’s solution to this is to ‘pillarbox’ your pages to make sure all of the content remains visible. It’s a neat enough solution for mass support, but luckily Apple has provided some additional features to help make websites take full advantage of the edge-to-edge display.
The 2 elements
There are 2 basic elements to accommodating iPhone X’s sensor housing:
- A new viewport meta content property
- Four new values for the
padding CSS property.
Viewport meta content
To start, find your
viewport meta tag in your site’s
<head>, and add the following property to the end of the
This will tell Safari to ditch the pillarbox and allow your site’s content to run to the edges of the display. It’s at this point it becomes apparent why Safari squashes the content by default; part of the page is now hidden beneath the sensor housing notch. We need to add some smart padding in CSS to make sure that our content stays visible.
We want to apply padding to the elements which are obscured by the sensor housing. Kindly enough, Apple has provided a CSS function and some pre-defined CSS variables to take care of the heavy lifting:
env() is only available for devices running iOS 11.2+, you’ll also need to include
constant() for fallback support for now. It seems that iOS 11.2 will continue to support
constant(), so go with that if you can only implement one, but I recommend you include both.
I get that it sounds a bit complicated, functions and variables in CSS? But the implementation is the same as any other property-value pair in CSS:
You will probably need to experiment to find the best place to apply these new styles, as it will vary a lot depending on your design. In our case, we want the background colours to fill the screen while keeping the content constrained within the safe areas, so we applied the padding to the inner elements of our containers.
Tip: use Safari’s Developer Tools on your Mac to inspect the elements in iOS Simulator’s Safari (or that of any connected iOS device).