iphoneX가 클라이언트 H5 페이지에 적응하는 문제에 대해

이 글은 주로 iphoneX 적응 클라이언트 H5 페이지에 대한 관련 정보를 소개합니다. 글의 소개는 매우 자세하고 모든 사람의 공부나 업무에 대한 특정 참고 학습 가치를 담고 있습니다. 필요한 친구들은 함께 공부하세요.

머리말

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

아이폰부터 우리는 항상 상태 표시줄에 20pt + 탐색 모음에 44pt 방식을 사용해 왔습니다. 아이폰 이후

2.하단 조작바

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

3. 적응 방법

위에서 언급했듯이 현재 iphoneX의 고유한 휴대폰 매개 변수를 기반으로 사용할 수 있는 적응 방법은 다음과 같습니다.

(1) 메타 태그

ios11 기존 뷰포트 메타에 적응하려면 iphoneX 태그에 viewport-fit이라는 새로운 기능이 추가되었습니다. 클라이언트가 전체 화면 적응을 수행하지 않고 페이지가 전체 화면으로 표시되기를 원하는 경우 다음 기능을 사용할 수 있습니다.

<meta name="viewport" content="width=device-width,viewport-fit=cover">

(2) 미디어 쿼리

1. 상수 함수 사용

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

@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}

2.iphoneX 고유 모델 매개변수 사용

@media only screen and (device-width: 375px) and (device-height:812px) and (-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 해상도)

• 위는 이 기사의 전체 내용이 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

Android를 사용하여 WeChat을 모방하여 H5 페이지의 진행률 표시줄 로드

css를 사용하여 iOS7을 모방한 스위치 버튼 구현

위 내용은 iphoneX가 클라이언트 H5 페이지에 적응하는 문제에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!