> 웹 프론트엔드 > CSS 튜토리얼 > iPhone 전체 화면에 CSS를 적용하는 방법

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

王林
풀어 주다: 2020-05-21 09:09:31
앞으로
3655명이 탐색했습니다.

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 기능은 ios<11.2가 상수(), ios>11.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:jb51.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿