iOS 웹뷰 아이폰 노치 / 제스처 영역 여백 대응
date
Jan 16, 2024
slug
ios-notch-and-safearea
author
status
Public
tags
iOS
summary
type
Post
thumbnail
category
updatedAt
Nov 11, 2024 01:53 PM
아이폰 X 이후로 화면의 상/하단에 노치 영역 및 물리 버튼이 사라지면서 제스쳐 영역이 등장했다.
대응 방법 (함께 사용하기!)
1. viewport-fit=”cover”
기본 옵션은 auto이다. 이 경우 콘텐츠를 모두 보여줄 수 있도록 콘텐츠를 축소해 보여준다.
단순 사각형이 아닌 디스플레이를 위한 속성이다. 스크린 전체로 viewport를 확장한다.
아이폰 X 이후로 단순 직사각형이 아닌 디스플레이가 나오기 시작했다.
//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에서 기기 정보를 얻는다.
사용 가능 변수
// iOS 11 constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) // iOS 11.2 이상 env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
예시
.post { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }