아이폰의 노치화면 상단에 고정했을 때 페이지를 위아래로 밀면 틈이 많이 생깁니다. .
아이폰 화면 크기
iPhoneX와 다른 모델의 크기 차이
위의 문제가 발생하는 이유는 iPhoneX에 안전 영역이 있기 때문입니다. 안전 영역의 내용은 모서리, 센서 하우징 및 홈 표시기에 영향을 받지 않습니다. 아래 그림의 파란색 영역입니다. :
즉, 잘 적응하려면 페이지의 보이는 영역과 조작 가능한 영역이 안전 영역 내에 있는지 확인해야 합니다.
구체적인 치수는 휴먼 인터페이스 지침 - iPhoneX를 참조하세요.
적응하는 방법?첫 번째 단계는 시각적 창에서 웹 페이지의 레이아웃을 설정하는 것입니다.
<메타 이름=뷰포트 콘텐츠=너비=장치-너비, 뷰포트-핏=커버>
iOS11의 새로운 기능입니다. Apple은 기존 뷰포트 메타 태그를 확장하여 시각적 창에서 웹 페이지의 레이아웃을 설정할 수 있습니다.
참고: 기본적으로 확장 기능을 추가하지 않는 웹 페이지는 viewport-fit=contain입니다. iPhoneX에 맞게 조정해야 하는 경우 viewport-fit=cover를 설정해야 합니다.자세한 내용은 viewport-fit 설명자를 참조하세요.
두 번째 단계에서는 페이지의 주요 콘텐츠가 안전 영역으로 제한됩니다.
.post { 패딩: 12px; 패딩-왼쪽: env(safe-area-inset-left); 패딩-왼쪽: const(safe-area-inset-left): env(safe-area-inset-right) ); 오른쪽 패딩: const(safe-area-inset-right);} 상수 함수Webkit의 CSS 기능인 iOS11의 새로운 기능은 안전 영역과 경계 사이의 거리를 설정하는 데 사용됩니다. 미리 정의된 4개의 변수가 있습니다.
참고: 일부 브라우저는 더 이상 상수 함수를 지원하지 않고 대신 env 함수를 사용합니다.
기본적으로 클라이언트가 보안 영역을 처리하는 경우 결과는 다음과 같습니다.
전체 화면 viewport-fit=cover 속성을 사용한 후:
안전 지역 지도:
안전 영역을 제한한 후 렌더링:
패딩은 위의 12픽셀로 설정됩니다. 방향이 회전된 경우:
세 번째 단계는 min() 및 max() 메서드를 사용하는 것입니다.
@supports(padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)) padding-right: max(12px, env(safe-area-inset-) 오른쪽)); }} 고정 요소 수정 문제
페이지 제목을 프런트 엔드에 구현하고 상단에 고정하면 차단됩니다. 이때 상단 값을 안전한 거리 값으로 설정할 수 있습니다. 예를 들면 다음과 같습니다.
.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}참고 기사: iPhone X용 웹사이트 디자인
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.