iOS 웹뷰 아이폰 노치 / 제스처 영역 여백 대응
#iOS
아이폰 X 이후로 화면의 상/하단에 노치 영역 및 물리 버튼이 사라지면서 제스쳐 영역이 등장했다.
대응 방법 (함께 사용하기!)
1. viewport-fit=”cover”
기본 옵션은 auto이다. 이 경우 콘텐츠를 모두 보여줄 수 있도록 콘텐츠를 축소해 보여준다.
단순 사각형이 아닌 디스플레이를 위한 속성이다. 스크린 전체로 viewport를 확장한다.
아이폰 X 이후로 단순 직사각형이 아닌 디스플레이가 나오기 시작했다.
javascript
//index.html
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />2. env(safe-area-inset)
위의 값을 적용 시 왼쪽 영역의 노치 영역값 만큼 패딩 값을 적용하게 된다. viewport-fit=cover를 적용한 후 노치 영역에 콘텐츠가 가려지지 않도록 그 영역 만큼에 값을 적용해 주는 것이다.
CSS env문법을 사용해 Safe Area 영역을 보장받을 수 있다. *userAgent에서 기기 정보를 얻는다.
사용 가능 변수
typescript
1// iOS 11
2constant(safe-area-inset-top)
3constant(safe-area-inset-right)
4constant(safe-area-inset-bottom)
5constant(safe-area-inset-left)
6
7// iOS 11.2 이상
8env(safe-area-inset-top)
9env(safe-area-inset-right)
10env(safe-area-inset-bottom)
11env(safe-area-inset-left)예시
typescript
.post {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}출처: https://webkit.org/blog/7929/designing-websites-for-iphone-x/