[CSS] 아이폰 X 모델 이상 M자 부분 퍼블리싱

최근에 발매되고 있는 스마트 폰들의 상단영역(노치) 부분을 퍼블리싱 하기 위해서는 일단.

템플릿에 ViewPort의 설정을 추가해 주어야 한다.

Before
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(보통 이렇게 생겼을듯...)

After
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

이런식으로 해당 부분을 추가하고 나면

기존에 디자인 한 부분이 위로 올라가면서 노치 부분과 겹처보이는 것을 볼수 있다.

그렇다면 해당 부분에 padding-top 영역을 주어 적당하게 내려오게 하면 된다.

padding-top을 줄때는 하드코딩이 하는 디바이스내의 값을 환경변수를 이용하는 것이 좋다.

IOS 같은 경우는 버전에 따라 아래와 같이 사용한다.

// iOS 11.0 버전
body{
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
}

// iOS 11.2 이상
body{
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)
}

이와 같이 처리 하면 우리가 원하는 것처럼 나타 난다.