Booking.com 모바일 사이트에서 iPhone X notch 대응 방법.(번역 예정)

애플이 iPhone X 라는 최신 플래그십 휴대폰 출시를 발표하자 미래의 모바일 기기에 새로운 기준을 마련하겠다고 약속했다. 우리는 그 디자인에 친숙 해 져야 했습니다.

“화면이 더이상 사각형이 아니네…”

큰 엣지 디스플레이 외에도, iPhone 의 가장 주목할 만한 추가 장치는 공식적으로 센서 하우징 으로 알려져 있는 ‘notch’ 이고, 그것은 완전히 새로운 도전적인 디자인 이었다: 스크린은 더이상 사각형일 필요는 없습니다. 이것은 네이티브 앱에 훨씬 더 큰 도전을 제시하지만, 웹에 대해서도 고려해야 할 몇가지 사항이 있습니다. 혐오 스럽든 영감을 주든, 센서 하우징은 그대로 유지될 것입니다. 따라서 지금이야말로 고객에게 기대할 만한 훌륭한 경험을 제공할 수 있는 절호의 기회입니다.

내가 받았던 첫인상은 “할일 겁나 많겠다”—마치 내가 CSS 미디어 쿼리를 처음 배웠을 때 처럼—하지만 몇가지 새로운 CSS 를 배우면(라고 쓰고 copy/paste 로 읽습니다.) 간단 합니다. 사실 너무 간단히 가르쳐 드릴 수 있습니다.

최신 Xcode 가 없다면 다운받아 시뮬레이터를 실행해 주세요.


문제점

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 15px or 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.

Booking.com’s homepage as it would appear on the iPhone X by default.

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 content attribute: viewport-fit=cover.

 

<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
Booking.com’s viewport meta tag, with viewport-fit=cover added.

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.

Booking.com with viewport-fit=cover enabled.

The CSS

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() and safe-area-inset-*.

Since 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:

 

.container {
  /* Fallback */
  padding:0 10px;
  
  /* iOS 11 */
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  
  /* iOS 11.2+ */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
The implementation of the env() function and the environment variables used for Booking.com.

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

 

.container {
  /* env() for iOS 11.2+, otherwise constant() */
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
All of the 4 new environment variables.
Booking.com after the safe area padding has been implemented.

The result

After carefully placing your paddings in the proper positions, you will have transformed the experience for your users—from ‘squashed to fit’ to ‘made to measure’! Doesn’t it look beautiful?

If you‘d like to know more, head over to Designing Websites for iPhone X on the webkit.org blog, where they also go into detail around the complications introduced when combining min() and max() with the env() function for more complex layouts.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다