IphoneX 적응의 핵심은 노치, 하단 작동 영역 및 큰 둥근 모서리에 페이지를 적응시키는 방법입니다.
다른 휴대폰과 비교했을 때 IphoneX의 차이점은 장치에도 화면이 하나이지만 실제로는 여러 모듈로 나누어져 있다는 것입니다. 자세한 내용은 아래 그림을 참조하세요.
일반 웹 페이지를 X로 이동하면 안전 영역에만 콘텐츠가 표시되고 안전하지 않은 영역에는 웹 콘텐츠가 표시되지 않습니다. 즉, 머리 부분과 아래쪽에 흰색 블록이 나타납니다. 그것을 처리하기 위해?
해결책 1. 본문에 배경색을 추가합니다.배경색을 추가하는 이유는 무엇입니까? 무슨 소용이 있나요? 방금 언급한 머리와 바닥에 흰색 반점이 있을 것입니다. 실제로 이 색상은 몸체의 배경색에서 나오기 때문에 흰색이라고 말하는 것은 정확하지 않습니다. 또한, 컨텐츠를 위로 끌어당기면 웹페이지 하단의 컨텐츠와 색상이 표시되는데, 이는 실제로 본문의 배경색입니다. 따라서 이 두 가지 효과를 수정하려면 본체의 배경색을 설정하면 됩니다.
2. viewport-fit =cover의 <meta> 태그를 추가합니다.이 단계는 매우 중요합니다. 먼저 결과를 살펴보겠습니다.
코드 복사