아이폰 노치 영역 대응 - 아이폰x버전 이상

문제.

노치라는 영역은 웹뷰에서는 문제없이 노출되지만 아이폰으로 확인 시 가려지거나 짤려보이는 현상을 말한다.

노치는 다른 표현으로 안전영역(safe Area)라고 할 수 있다.

아이폰 화면의 레이아웃이 변경되면서 생긴 문제로 X버전부터 이런 문제가 발생하기 시작했다.

 

해결.

1. 전체 화면 설정

meta 태그를 추가한다.

<meta name="viewport" content="initial-scale=1, viewport-fit=cover">

viewport-fit이란?

viewport에 새로 추가된 속성으로 단순한 사각형 모양의 디스플레이가 아닌 디스플레이를 위한 속성이다.

vieport-fit을 지정하지 않으면 기본값은 auto로 콘텐츠를 모두 보여줄 수 있도로 콘텐츠를 축소하여 보여준다.

viewport-fit을 위와 같이 cover로 지정 시 viewport를 스크린 전체로 확대한다.

 

아이폰X가 나오면서 단순히 네모난 모양이 아닌 다양한 모양의 디스플레이가 나오기 시작했다.

viewport-fit=cover를 사용 시 반드시 다음 단계에 설명하면 css 속성을 함께 사용해야 한다.

 

2. safe-area-inset-*

.text-area {
 padding-left: env(safe-area-inset-left);
}

위의 값을 적용 시 왼쪽 영역의 노치 영역값 만큼 패딩 값을 적용하게 된다.

viewport-fit=cover를 적용한 후 노치 영역에 콘텐츠가 가려지지 않도록 그 영역 만큼에 값을 적용해 주는 것이다.

 

safe-area-inset-*

원하는 위치에 따라 *값에 적용해주면 되고 적절한 위치에 해당 값을 넣어주면 된다.

 

tmi.

사실 이 문제에 대해 확인하게 된 상황은 어이없게도 노치에 대한 해결이 되지 않는 상황이었다. 이게 과연 노치 때문인건지도 의문스럽게 되어버린 상황

원했던 해결은 바디 내부에 모달을 띄운 상태에서 모달 내부의 스크롤을 움직일 때 바디가 pull to refresh를 하지 않도록 하는 것이었다.

이 상황을 해결하기 위해 이것저것 적용하다보니 노치까지 오게되었고

pull to refresh를 막기 위해 body에 position: fixed와 overflow: hidden 등의 값을 적용했더니 모달이 열릴때 하단에 노치 영역이 생기더라.. 참 내.. 이건 아직도 설명할 수가 없다. 100vh나 100%로 적용한 height는 소용없었다.

무튼 이 부분은 ios safari에서 나오는 현상으로 해결 방안은 아직 찾지 못했다.

어찌됐든 safari에서 이 외에도 ios는 꽤나 여러가지의 이슈들이 터지고 있는데 아이폰 유저로써 너무 슬프다는...

 

 

 

참고.

https://wit.nts-corp.com/2019/10/24/5731