아이폰X 노치영역 대응 최적화하기

이번에 아이폰X 로 갈아타고 노치(notch)영역에 최적화하는 작업을 진행한 내용을 정리합니다.

기존 웹사이트는 아이폰X에서 가로모드로 보면 좌우에 흰색 영역으로 막혀서 보이게 됩니다.  여기에 몇 가지 코드를 더하면 화면을 적절하게 채워서 보기 좋게 됩니다.

(ios 11.2 업데이트에서 constant가 제거되서 constant 대신 env를 사용하도록 수정했습니다.)

  1. 메타 태그에 viewport-fit=cover 추가
  2. 레이아웃의 각 블록마다 좌우 여백에 safe-area-inset-left, safe-area-inset-right 값을 더해서 보정합니다.  기존 좌우 여백값 env(safe-area-inset-left) 값을 더해서 아이폰x의 가로모드일때만 수치가 보정됩니다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.