집 > 기사 > 웹 프론트엔드 > HTML5 페이지를 iPhoneX에 적용하는 것과 관련된 문제

HTML5 페이지를 iPhoneX에 적용하는 것과 관련된 문제

php中世界最好的语言원래의: 2018-01-29 09:31:142266검색

이번에는 iPhoneX에 HTML5 페이지를 적용하는 것과 관련된 문제를 가져오겠습니다. HTML5 페이지를 iPhoneX에 적용할 때 주의사항은 무엇인가요? 아래는 실제 사례입니다.

1. 아이폰 소개 배율에 영향을 미치는 핵심 요소는 PPI(DPI)입니다. 화면 밀도와 다양한 크기의 관계를 이해하면 배율의 개념을 깊이 이해하는 데 도움이 됩니다. "기본을 알아보세요! 디자이너를 위한 DPI 가이드"

이번 업그레이드에서 iPhone8의 화면 크기와 해상도는 iPhone6 및 이후 버전의 훌륭한 전통을 계승했습니다.

그러나 iPhone X는 화면 크기, 해상도, 모양에 관계없이 큰 변화가 있습니다 iPhone 8을 참고하여 iPhone X의 적응을 어떻게 고려해야 하는지 살펴보겠습니다.

2. iPhone의 적응 센서 하우징(센서 하우징, 풀뱅)과 하단의 홈 표시 실드. 즉, 표시할 콘텐츠는 최대한 안전 영역 내에 있어야 합니다.

3. iPhoneX의 적응---viewport-fit 3.1 PhoneX의 적응, viewport-fit은 iOS 11에서 채택되었습니다. 메타 태그는 적응 솔루션 역할을 합니다. viewport-fit의 기본값은 auto입니다.

viewport-fit 값은 다음과 같습니다:

auto 기본값: viewprot-fit:contain; 페이지 내용이 안전 영역에 표시됩니다.

cover viewport-fit:cover, 페이지 내용이 화면을 채웁니다.

viewport-fit 메타태그 설정(cover Time)

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

3.2 CSS 상수() 함수 및 safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom

As 소개 위 그림에 표시된 iOS WebKit 11에는 새로운 CSS 함수 상수()와 미리 정의된 4개의 상수 세트(safe-area-inset-left, safe-area-inset-right, safe-area-inset-top)가 포함되어 있습니다. 그리고 안전 영역 삽입 바닥. 함께 사용하면 스타일이 각 측면의 안전 영역 크기를 참조할 수 있습니다.

3.1 기본 시간인 viewport-fit:contain을 설정하면 safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 및 safe-area-inset-Bottom을 설정합니다. 다른 매개변수는 아무런 영향을 미치지 않습니다.

3.2 viewport-fit:cover를 설정할 때: 설정은 다음과 같습니다

body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px           
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0               
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0               
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px      
}

4. iPhoneX 적응---높이 통계

viewport-fit:cover + 네비게이션 바

5. query

여기에서는 812px가 아닌 690px(안전 영역 높이)가 사용됩니다.

@media only screen and (width: 375px) and (height: 690px){
    body {
        background: blue;
    }
}

6.iphoneX viewport-fit

문제 요약

1. iphoneX 페이지에서 그라디언트 색상을 사용하는 경우: Cover;

1.1에서는 배경색에 대해 단색과 그라데이션 색상의 차이를 설정합니다. 단일 색상인 경우 전체 화면을 채웁니다. 그라데이션 색상을 설정하면 높이에서만 렌더링됩니다. 하위 요소의 높이만 690px, padding-top:88px가 사용됩니다. 본문은

<body><div class="content">this is subElement</div></body>

1로 고정됩니다. 단색의 경우:

* {
           padding: 0;
           margin: 0;       
       }       
       body {
           background:green;
           padding-top: constant(safe-area-inset-top); //88px           
           /*padding-left: constant(safe-area-inset-left);*/           
           /*padding-right: constant(safe-area-inset-right);*/           
           /*padding-bottom: constant(safe-area-inset-bottom);*/       
       }

2. 그라디언트 색상을 사용하여 전체 화면을 채우는 방법에 대해 CSS 설정은 다음과 같습니다

* {
           padding: 0;
           margin: 0;
       }
       body {
           background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
           padding-top: constant(safe-area-inset-top); //88px
           /*padding-left: constant(safe-area-inset-left);*/
           /*padding-right: constant(safe-area-inset-right);*/
           /*padding-bottom: constant(safe-area-inset-bottom);*/
       }

이 사례를 읽고 나면 방법을 마스터했다고 생각합니다. 더 흥미로운 정보는 PHP의 다른 관련 기사를 참조하세요. 중국사이트!