iphoneX를 클라이언트 H5 페이지에 적용하는 방법에 대한 튜토리얼

현재 많은 APP 디자이너들이 H5 프런트엔드 개발로 전환하기 시작했지만 모든 iPhone 및 Android 모델의 적응 문제를 해결하는 것이 우리의 최우선 과제입니다. APP를 디자인하든 프런트엔드 H5를 작성하든 모바일 호환성을 고려해야 합니다.

아이폰 이후로

1. 상단바

이전 클라이언트에서는 항상 상태 표시줄에 20pt + 탐색 표시줄에 44pt의 방식을 사용했습니다. 아이폰 이후

2. 하단 조작바

아이폰 이후로 이때, 하단에 빈 안전영역을 남겨두어야 하며, 페이지 내용의 마지막 하단 줄이 휴대폰 모서리에 와야 합니다. 이 안전 영역의 높이는 34pt입니다.

3. 적응방법

결론적으로, 현재 iphoneX의 고유한 휴대폰 매개변수를 기반으로 우리가 채택할 수 있는 적응 방법은 다음과 같습니다.

(1)메타태그

아이폰에 적응하려면

 <메타 이름=뷰포트 콘텐츠=너비=장치-너비,뷰포트-핏=커버>

(2) 언론문의

1. 상수 함수 사용

상수 기능은 viewport-fit=cover가 설정된 경우에만 사용할 수 있습니다.

 @supports(bottom:constant(safe-area-inset-bottom)) { 선택기{ padding-bottom:constant(safe-area-inset-bottom); padding-bottom:calc(30px(가정 값) + Constant(safe- Area-inset-bottom)); //실제 상황에 따라 적응 방법을 선택하세요.}}

2. iphoneX의 고유한 모델 매개변수를 사용하세요.

 @media 전용 화면 및 (device-width: 375px) 및 (device-height:812px) 및 (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }}

(3) js 판단 (아래에서는 Jquery를 사용함)

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }}

(4) 클라이언트 프로토콜

클라이언트와의 일관성을 유지하기 위해 클라이언트 프로토콜에 따라 iphoneX인지 여부를 쿼리하도록 클라이언트에 요청할 수도 있습니다.

4. 매개변수 설명

위 코드의 매개변수는 다음과 같이 설명됩니다.

• safe-area-inset-bottom — 안전 영역과 경계 사이의 거리를 설정하는 데 사용되는 ios11의 새로운 기능입니다.
• 375 — iphoneX 장치의 너비
• 812 — iphoneX 장치의 높이
• 3 — iphoneX 장치의 해상도
• 724 — iphoneX 장치 높이(812) - 상단 표시줄 높이(88)
• 34 — 하단 안전 구역 높이

위의 매개변수는 1pt=1px 표준을 기반으로 계산됩니다. H5 페이지가 rem 크기 조정 방법을 채택하면 1pt = 1px * 3(iphoneX 해상도)

위의 내용은 이 기사의 전체 내용입니다. 이 기사의 내용이 모든 사람의 학습이나 업무에 특정 참고 가치가 있기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요. VeVb Wulin의 지원에 감사드립니다. 회로망.