[css] iphone-x 대응

 iphone-x는 M자 탈모로 유명한데,

이 화면에서는 위/아래 자동 마진값이 잡혀 화면 대응이 어려울 수 있다.

전체 화면을 원한다면 해당 조치가 필요하다.

(네비게이션, 혹은 header menu 영역과 겹치지 않게 조치할 수 있다.)

 

1. viewport 추가

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

 

2. env() 적용

- 해당 코드는 iphone-x에서만 대응합니다.

.wrap {
    padding-top:calc(constant(safe-area-inset-top) + 15px);
    padding-bottom:calc(constant(safe-area-inset-bottom) + 15px)
}

 

https://wit.nts-corp.com/2019/10/24/5731

아이폰X 안전영역(Safe Area) 대응 사례 | WIT블로그