[css 속성] env() (아이폰 노치 영역 대응)

아이폰X로 들어서면서 아이폰에는 노치라는 영역이 생겼다.

표시된 부분이 노치 영역이다.

1. 노치 영역의 문제

노치라 불리는 이 영역은 작업을 진행할 때 많은 에로사항을 준다.

웹뷰에서는 문제없이 노출되던 영역들도 노치 영역 때문에 가려지거나 짤려 보이는 현상이 

아이폰X 이후로 나타나게 되었다.

 

예를 들어 가로모드로 화면을 봤을 때 오른쪽에 붙어서 노출되는 네비게이션을

만들었다는 가정을 하면 내가 의도했던 것과는 다르게

네비게이션 영역이 노치에 가려지는 현상을 보게 될 것이다.

위와 같이 네비 메뉴가 노치에 가려지는 현상이 생기기 때문에

우리는 이 방법을 해결하기 위한 내용을 알아봐야한다.

 

2. 노치에 가려지는 문제 해결

* html

먼저 노치 문제를 해결하기 위해서는 html 소스에서 viewport의 content 속성에

viewport-fit=cover 를 넣어줘야한다. (viewport-fit의 기본값은 auto이다.)

<meta name="viewport" content="viewport-fit=cover">

 

* css

html 소스에 viewport를 적용해주고 css에 env() 속성을 적용해주면 된다.

/* iOS 11.0 버전 */
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)

/* iOS 11.2 이상 */
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

위와 같이 ios의 버전에 따라 입력되는 속성이 다른데

ios 11.0 버전에서는 constant() 속성을.

ios 11.2 버전 이상부터는 constant() 속성이 없어지고 env() 으로 대체되었기 때문에 env()로 사용한다.

 

ios 11.0과 11.2 버전 이상 모두를 만족하려면 두 속성을 다 적용하면 되겠다.

 

사용의 예

 

env() 미적용

.nav{right:0;}

 

 

env() 적용

.nav{right:0; right:constant(safe-area-inset-right); right:env(safe-area-inset-right);}

위쪽 env() 미적용 예시와 같이 단순 right:0만 입력하게 되면

노치가 있는 아이폰의 경우 해당 영역이 노치에 가려지게 된다.

 

하지만 env() 속성을 적용하게 되면

예시와 같이 노치 영역을 제외하고 right:0을 계산하기 때문에 노치에 가려지는 현상은 없게 된다.

 

 

 

---

참고

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

https://velog.io/@devcmkim/IOS-%EB%85%B8%EC%B9%98%EB%8C%80%EC%9D%91-Css