Safe Area
아이폰 디스플레이 상하단 라운드영역, 노치영역, 아이폰 X의 대머리 영역 채우기
viewport meta tag
viewport-fit=cover뷰포트를 선언해서 아이폰을 전체 화면으로 만든다. 기본값은 auto로 설정되어 있다.
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>env()
노치영역과 인디케이터 영역까지 전체 사용하게 되면 콘텐츠 잘림 현상이나 겹침 현상이 있을 수 있다. 아이폰에서 적용 되는 env() 속성을 통해 처리하면 된다. 이 코드는 아이폰에서만 동작해서 다른 디바이스에서는 영향을 주지 않는다.
constant()
IOS11
하위 버전 대응이 필요할 경우 env와 같이 사용
env()
IOS11.2 이후 버전
// iOS 11.0 버전
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)적용 코드
.float-area {
padding: 20px 0 calc(constant(safe-area-inset-bottom) + 20px);
padding: 20px 0 calc(env(safe-area-inset-bottom) + 20px);
}safe-area-inset 높이
- 세로 상단 : 44pt
- 세로 하단 : 34pt
- 가로 하단 : 21pt