이번에는 iPhoneX에 HTML5 페이지를 적용하는 것과 관련된 문제를 가져오겠습니다. HTML5 페이지를 iPhoneX에 적용할 때 주의사항은 무엇인가요? 아래는 실제 사례입니다.
1. 아이폰 소개 배율에 영향을 미치는 핵심 요소는 PPI(DPI)입니다. 화면 밀도와 다양한 크기의 관계를 이해하면 배율의 개념을 깊이 이해하는 데 도움이 됩니다. "기본을 알아보세요! 디자이너를 위한 DPI 가이드"
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">
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 }
여기에서는 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의 다른 관련 기사를 참조하세요. 중국사이트!
관련 읽기:
html 입력 드롭다운 메뉴 작성 방법양식 삽입 시 양식 위와 아래에 빈 줄을 처리하는 방법
위 내용은 HTML5 페이지를 iPhoneX에 적용하는 것과 관련된 문제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!