화면 크기
우리가 익히 알고 있는 아이폰 시리즈의 개발 규모를 요약하면 다음과 같다.
△아이폰 모델별 개발규모잘 알려진 픽셀 크기로 변환합니다.
△각 모델의 다차원 치수확대 맵은 실제로 픽셀 크기와 현상 크기 간의 확대 관계이지만 이는 외부 표현일 뿐입니다. 배율에 영향을 미치는 핵심 요소는 PPI(DPI)입니다. 화면 밀도와 다양한 크기의 관계를 이해하면 배율의 개념을 깊이 이해하는 데 도움이 됩니다. "기본을 알아보세요! 디자이너를 위한 DPI 가이드》
이번 업그레이드에서는 iPhone8의 화면 크기와 해상도가 iPhone6 이후 버전의 훌륭한 전통을 이어받았습니다.
하지만 iPhone X는 화면 크기, 해상도, 심지어 모양까지 큰 변화를 겪었습니다. iPhone 8을 참고하여 iPhone X의 적응을 어떻게 고려해야 하는지 살펴보겠습니다.
iPhone X 크기의 변화를 살펴보겠습니다.
2. iPhoneX 적응---세이프 에리어(Safe Area)iPhone X의 디자인 레이아웃에 대한 Apple의 의견은 다음과 같습니다.
핵심 콘텐츠는 장치의 둥근 모서리(모서리), 센서 하우징(센서 하우징, 전체 앞머리) 및 하단의 홈 표시기에 의해 가려지지 않도록 안전 영역에 있어야 합니다. 즉, 표시하려는 콘텐츠는 가능한 한 안전 영역 내에 있어야 합니다.
3. iPhoneX의 적응 --- 적응 방식 viewport-fit 3.1 PhoneX의 적응, viewport-fit의 메타 태그는 iOS 11의 적응 방식으로 사용됩니다. viewport-fit의 기본값은 auto입니다.viewport-fit 값은 다음과 같습니다.
| 자동 | 기본값: viewprot-fit:contain; 페이지 콘텐츠가 안전 영역에 표시됩니다. |
| 씌우다 | viewport-fit:cover, 페이지 콘텐츠가 화면을 채웁니다. |
viewport-fit 메타태그 설정(커버링 시)
<메타 이름=뷰포트 콘텐츠=너비=장치-너비,초기-스케일=1.0, 최소-스케일=1.0, 최대-스케일=1.0, 사용자-스케일러블=no, 뷰포트-핏=커버>
3.2 CSS 상수() 함수 및 safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom 소개
위에 표시된 대로 iOS 11의 WebKit에는 새로운 CSS 함수 상수()와 미리 정의된 4개의 상수 집합(safe-area-inset-left, safe-area-inset-right, safe-area -inset-top 및 safe)이 포함되어 있습니다. -영역 삽입-하단. 함께 결합하면 스타일이 각 측면의 안전 영역 크기를 참조할 수 있습니다.
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); 수직이 아님 Is 0 padding-right: Constant(safe-area-inset-right); //화면이 수직이 아닌 경우 0 padding-bottom: Constant(safe-area-inset-bottom);//하단 호의 높이는 34px입니다. } 4. iPhoneX 적응---키 통계뷰포트 맞춤:커버 + 탐색 모음
5. iPhoneX 적응---미디어 쿼리여기서는 812px가 아닌 690px(안전 영역 높이)가 사용됩니다.
@media 전용 화면 및 (너비: 375px) 및 (높이: 690px){ body { background: blue }} 6.iphoneX 뷰포트 핏 문제 요약1. iphoneX 페이지가 그라데이션 색상을 사용하는 경우 if viewport-fit:cover;
1.1 단색과 그라데이션 색상의 차이는 배경색 설정 시 설정됩니다. 단색인 경우 화면 전체를 채우게 됩니다. 그라데이션 색상을 설정하면 해당 높이에만 렌더링됩니다. 하위 요소이며 페이지 높이는 690px입니다. 위의 padding-top:88px를 사용하세요.
본체는 다음과 같이 고정되어 있습니다.
<body><div class=content>하위 요소입니다</div></body>
1. 흑백인 경우:
* { padding: 0; margin: 0; } body { background:green; 상수(safe-area-inset-top) //88px /*padding-left: 상수(safe-area-inset-left) );*/ /*padding-right: 상수(safe-area-inset-right);*/ /*padding-bottom: 상수(safe-area-inset-bottom);*/ }2. 그라데이션 컬러
* { 패딩: 0; 여백: 0; } 본문 { 배경:-webkit-gradient(선형, 0 0, 0 하단, from(#ffd54f), to(#ffaa22)); -inset-top); //88px /*padding-left: 상수(safe-area-inset-left);*/ /*padding-right: 상수(안전 영역 삽입 오른쪽);*/ /*패딩 하단: 상수(안전 영역 삽입 하단);*/ }전체 화면을 채우기 위해 그라디언트 색상을 사용하는 문제를 해결하는 방법은 다음과 같습니다.
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1, viewport-fit=cover> <title>iPhone X용 웹사이트 디자인: 안전 영역 준수</title> <style> * { 패딩: 0; 여백: 0; } html, body { 높이: 100% } body { 패딩-상단: 상수(안전 영역-삽입-왼쪽); 상수(안전 영역-삽입-왼쪽); 패딩 오른쪽: 상수(안전 영역-삽입-오른쪽); 패딩 하단: 상수(안전 영역-삽입-하단) } .content { 배경: -webkit- 그래디언트(선형, 0 0, 0 하단, from(#ffd54f), to(#ffaa22)) 너비: 100% 높이: 724px; </style></head><body><div class=content>이것은 하위 요소입니다</div></body></html>2. 페이지 요소는 고정 위치 조정을 사용합니다: {position:fixed;}
2.1 하위 요소 페이지가 하단에 고정되면 viewport-fit:contain;을 사용하면 하단:0이 표시될 때 안전 영역에만 표시되는 것을 볼 수 있습니다.
<!DOCTYPE html><html><head> <meta name=viewport content=initial-scale=1> <!--<meta name=viewport content=initial-scale=1, viewport-fit=cover>--> <title>iPhone X용 웹사이트 디자인: 안전 영역 준수</title> <style> * { padding: 0; margin: 0 } /*html,body {*/ /*height: 100%;*/ /*}*/ body { background: grey; /*padding-top: Constant(safe-area-inset-top);*/ /*padding-left: Constant(safe-area-inset-left );*/ /*padding-right: 상수(safe-area-inset-right);*/ /*padding-bottom: 상수(safe-area-inset-bottom);*/ } .top { 너비: 100%; 높이: 44px; 배경: 보라색; 하단: 0; 높이: 44px; head><body> <div class=top>이것이 위쪽입니다</div> <div class=bottom>이것이 아래쪽입니다</div></body></html>2.1 하위 요소 페이지가 하단에 고정되면 viewport-fit:cover를 사용할 때 하단:0이 안전 영역에만 표시되는 것을 볼 수 있습니다.
html,body {width:100%;heigth:100%} 추가
그림 1:
* { 패딩: 0; 여백: 0; } html,body { 높이: 100%; } body { 배경: 회색; 상수(안전 영역-삽입-왼쪽); 영역 삽입-왼쪽); 패딩-오른쪽: 상수(안전 영역-삽입-오른쪽) 패딩-하단: 상수(안전 영역-삽입-하단); 너비: 100%; 높이: 44px; .bottom { 위치: 고정: 0; 오른쪽: 44px;그림 2:
* { 패딩: 0; 여백: 0; } html,body { 높이: 100%; } body { 배경: 회색; 상수(안전 영역-삽입-왼쪽); Area-inset-left); padding-right: 상수(safe-area-inset-right); /*padding-bottom: 상수(safe-area-inset-bottom);*/ } .top { 너비: 100%; 배경: 보라색; } .bottom { 위치: 고정: 0; 오른쪽: 44px;2.3 AlertView 팝업 마스크 레이어에 대한 솔루션
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <!--<meta name=viewport content=width=device-width, 초기 규모=1.0, 최소 규모=1.0 , maximum-scale=1.0, user-scalable=no>--> <메타 이름=뷰포트 content=width=device-width,initial-scale=1.0, 최소 규모=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover> <meta http-equiv=pragma 콘텐츠=no-cache > <meta http-equiv=cache-control content=no-cache> <meta http-equiv=expires content=0> <title>alertView</title> <script data-res=eebbk> document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px'; </script> <style> * { margin: 0 } html,body { 너비: 100%; 높이: 100%; } 본문 { 글꼴 크기: 0.32rem; 상수(안전 영역-삽입-상단); 패딩-왼쪽: 상수(안전-영역-삽입-왼쪽); 패딩-오른쪽: 상수(안전-영역-삽입-오른쪽); 상수(안전 영역 -inset-bottom); } .content { text-align: center; } .testBut { 여백: 50px 너비: 100px 테두리: 1px solid darkgray; 개요: 없음; 배경색: 노란색 } </style> <link href=alertView.css rel=stylesheet type=text/css></head> <section class=content> <button class=testBut onclick=showLoading()>팝업 로딩</button> </section> <script type=text/javascript src=alertView.js></script> <script> function showLoading() { UIAlertView.show({ type:input, title: Warm 알림, //제목 내용: VIP 멤버십이 곧 만료됩니다, //새 isKnow 가져오기: false }); var xx = new UIAlertView(); console.log(xx) } </script></body></html> 요약위 내용은 HTML5 페이지를 iPhoneX에 적용하는 것에 대해 편집자가 소개한 내용입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!