사용법
1. 메타태그 뷰포트에 viewport-fit=cover 를 추가
모서리, 센서 하우징 및 홈 버튼을 피하기 위해 동적으로 조정이 가능해 iPhone X의 화면 공간을 최대한 활용할 수 있다.
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'> |
2. padding-top: env(safe-area-inset-bottom) 으로 기본으로 사용
env(safe-area-inset-bottom); // IOS 11.0 이상 (신) constant(safe-area-inset-bottom); // IOS 11.0 버전 (구) <!-- ios 11.2 업데이트에서 constant가 제거됨 env를 사용.--> |
3. 기본적인 padding값이 스타일로 들어가있을 경우에는 calc를 사용하여 정리한다.
.button {
padding: 12px 16px; // 기본 값을 지정해 준후
padding: 12px 16px calc(constant(safe-area-inset-bottom) + 12px) 16px;
// 변경이 필요한 부분은 하단의 패딩값이기 때문에 constant로 구버전 값을 넣고
padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px) 16px;
} // env로 신규버전 값을 넣어준다. |
[TIP]
레이아웃의 각 블록마다 좌우 여백에 safe-area-inset-left, safe-area-inset-right 값을 더해서 보정한다. 기존 좌우 여백값 env(safe-area-inset-left) 값을 더해서 아이폰X의 가로모드일때만 수치가 보정된다.
env () 함수는 iOS 11에 constant ()라는 이름으로 제공되었다. Safari Technology Preview 41 및 iOS 11.2 beta부터 constant ()가 제거되고 env ()로 대체되었다. CSS 대체 메커니즘을 사용하여 필요에 따라 두 버전을 모두 지원할 수 있지만 앞으로 env ()를 선호되어야 한다.
padding-top: 0; padding-top: env(safe-area-inset-top); padding-top: constant(safe-area-inset-top);
참고
https://webkit.org/blog/7929/designing-websites-for-iphone-x/
https://dohoons.com/blog/1468/
'CSS' 카테고리의 다른 글
| SASS 시작하기 (node-sass) (0) | 2021.02.27 |
|---|