배경
Apple의 iphone에서 많은 앱이 내부 웹뷰 스타일과 직접 호환됩니다. 화면이 세로 모드일 때 상단은 웹뷰의 콘텐츠를 가리지 않는 탐색 모음인 경우가 많습니다. 하단 높이는 웹뷰 하단이 검은색 가로바 영역 내에 들어가지 않도록 앱 레벨에서 설정하여 웹뷰에서 콘텐츠 표시를 방해하지 않도록 합니다.
하지만 각 앱은 매우 다르며 내부 웹뷰도 다르게 표시됩니다. 앱의 하단 높이가 없으면 웹뷰의 하단 콘텐츠가 작은 검은색 막대로 차단됩니다. 웹 페이지 스타일 호환성 측면에서는 이전 모델의 스타일에 영향을 주지 않으면서 iPhoneX 하단의 독특한 "뱅" 및 작은 검정색 가로 막대 스타일과 호환되어야 합니다.
안전지역
먼저 iphoneX의 안전 영역을 이해하세요. 아래 사진의 파란색 부분이 안전지역입니다. 양쪽 여백, 상단 노치, 하단의 작은 검은색 막대 영역은 모두 안전하지 않은 영역으로, 콘텐츠가 차단될 수 있는 영역입니다. 그런 다음 안전 영역 내에서 콘텐츠를 제어해야 합니다.
호환 솔루션
다행히 iphoneX가 나왔을 때 공식 ios11 시스템에서도 이러한 스타일 차이에 대응할 수 있도록 WebKit Api를 제공했습니다.
1단계: 뷰포트 맞춤 속성 설정
<메타 이름='viewport' content='initial-scale=1, viewport-fit=cover'>
포함: 시각적 창에는 웹페이지 콘텐츠가 완전히 포함되며, 페이지 콘텐츠는 안전 영역
에 표시됩니다. 표지: 웹페이지 콘텐츠가 시각적 창을 완전히 덮고 페이지 콘텐츠가 화면을 채웁니다
자동: 기본값, contain
이 문제를 해결하기 위해 iOS11의 WebKit에는 새로운 CSS 함수 env()와 사전 정의된 4개의 환경 변수 safe-area-inset-left, safe-area-inset-right, 안전 영역 삽입 상단 및 안전 영역 삽입 하단. 이 네 가지 환경 변수는 안전 영역으로부터의 거리를 나타냅니다.
- safe-area-inset-left: 안전 영역과 왼쪽 경계 사이의 거리
- safe-area-inset-right: 안전 영역과 오른쪽 경계 사이의 거리
- safe-area-inset-top: 안전 영역과 상단 경계 사이의 거리
- safe-area-inset-bottom: 안전 영역과 하단 경계 사이의 거리
ios11.2에서는 이전에는 Constants() 함수를 사용했으나 이후 ios11.2 버전에서는 env() 함수로 변경되었습니다. 둘 다 호환되도록 하려면 둘 다 작성할 수 있습니다.
2단계: 안전 지역 거리 설정
.post {
패딩: 12px;
패딩 왼쪽: 상수(안전 영역 삽입 왼쪽); // iOS<11.2
패딩 왼쪽: env(safe-area-inset-left); // iOS>=11.2
}
이렇게 하면 안전 영역이 아닌 경우 env(safe-area-inset-left)가 0이 아니므로 padding-left에 안전 거리를 설정하여 콘텐츠가 차단되지 않도록 합니다.
@지원 을 포함하는 경우가 더 많습니다. 내부 CSS는 브라우저에서 env(safe-area-inset-bottom)가 지원되는 경우에만 실행됩니다.
.하단바{
너비: 100%;
위치: 고정;
하단: 0;
배경: 파란색;
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.하단바 {
패딩 바닥: 상수(안전 영역 삽입 바닥);
패딩 바닥: env(안전 영역 삽입 바닥);
}
}
참고: WeChat의 웹뷰는 기본 viewport-fit=cover 상태입니다. 안전거리만 설정하면 됩니다. 위의 솔루션은 WeChat 애플릿에도 적용 가능합니다.