iPhone 전체 화면에 CSS를 적용하는 방법

1. 미디어 쿼리 방법의 문제

/*iPhone X 适配*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XS max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
 .fixed-bottom{
 bottom: 37px;
 }
}
/*iPhone XR max 适配*/
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
 .fixed-bottom{
 bottom: 37px;
 }
}

: WeChat webveiw에서 이 솔루션은 요소 하단에 안전 영역 너비를 추가할 수 있습니다. 문제 없습니다. 그러나 Safari(페이지 표시 영역이 이미 안전 영역 내에 있음)와 같은 하단 막대가 있는 브라우저에서도 안전 영역 너비가 추가됩니다.

(동영상 튜토리얼: css 동영상 튜토리얼)

2. CSS 기능

애플이 전체화면 출시 이후 제공하는 CSS 기능은 ios11.2가 env()입니다. 위, 아래, 왼쪽, 오른쪽 안전 영역 너비에 해당하는 safe-area-inset-top, safe-area-inset-left, safe-area-inset-right, safe-area-inset-bottom을 채울 수 있습니다. . env 및 상수는 viewport-fit=cover인 경우에만 적용됩니다.

코드는 다음과 같습니다.

메타 태그에 viewport-fit=cover

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

css 작성 방법이 추가되었습니다. env를 지원하지 않는 브라우저에서는 상수가 이 스타일을 무시합니다.

.fixed-bottom{
 bottom: 0;
 bottom: constant(safe-area-inset-bottom);
 bottom: env(safe-area-inset-bottom);
}

추천 튜토리얼: 시작하기 위한 기본 튜토리얼 CSS

위 내용은 iPhone 전체 화면에 CSS를 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!