[CSS] IOS 노치 대응

웹뷰 개발하는 도중 IOS 단말에서 postion fixed 후 top 의 값이 원하는 방향대로 나오지 않아서 꽤나 삽질했던 경험이 있어서 기록을 남긴다.

 

안전영역(Safe Area)이란?

• Safe Area는 원래 TV에서 처음 도입된 개념이다.
• TV 해상도 비율이 다양해지면서 영상에서 타이틀, 자막 등이 필수 콘텐츠의 노출을 보장할 수 있는 영역

아이폰X는 Safe Area가 필요한 이유

• 아이폰8 이하 기종과 달리 아이폰X의 디스플레이 영역은 상/하단 라운드 영역을 포함하고 있기 때문이다.
• 추가적으로 상단 영역은 카메라, 스피커 등의 센서가 있는 노치(notch)가 존재하여 콘텐츠가 제대로 노출될 수 없다.

IOS 전체 화면 적용

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

 

export const FaqFixedTabButtonWrap = styled(Box)`
  position: fixed;
  z-index: 100;
  width: 100%;
  height: 50px;
  top: calc(${HeaderHeight}px + env(safe-area-inset-top));
  left: 0;
  background-color: #1a1e25;
`;