HTML5 페이지를 iPhoneX에 적용하는 것과 관련된 문제-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

php中世界最好的语言

Jan 29, 2018 am 09:31 AM

html5iphonex적응

이번에는 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의 다른 관련 기사를 참조하세요. 중국사이트!

관련 기사

H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

HTML5 및 H5 : 일반적인 사용법 이해Apr 22, 2025 am 12:01 AM

HTML5와 H5 사이에는 차이가 없으며, 이는 HTML5의 약어입니다. 1.HTML5는 HTML의 다섯 번째 버전으로 웹 페이지의 멀티미디어 및 대화식 기능을 향상시킵니다. 2.H5는 종종 HTML5 기반 모바일 웹 페이지 또는 응용 프로그램을 참조하는 데 사용되며 다양한 모바일 장치에 적합합니다.

HTML5 : 현대 웹의 빌딩 블록 (H5)Apr 21, 2025 am 12:05 AM

HTML5는 W3C에 의해 표준화 된 하이퍼 텍스트 마크 업 언어의 최신 버전입니다. HTML5는 새로운 시맨틱 태그, 멀티미디어 지원 및 양식 향상을 도입하여 웹 구조, 사용자 경험 및 SEO 효과를 개선합니다. HTML5는 웹 페이지 구조를 더 명확하게하고 SEO 효과를 더 좋게하기 위해, 등 등과 같은 새로운 시맨틱 태그를 소개합니다. HTML5는 멀티미디어 요소를 지원하며 타사 플러그인이 필요하지 않으므로 사용자 경험을 향상시키고 속도를로드합니다. HTML5는 양식 함수를 향상시키고 사용자 경험을 향상시키고 양식 검증 효율성을 향상시키는 새로운 입력 유형을 도입합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

Dreamweaver Mac版

시각적 웹 개발 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.