[태그:] iphonex

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

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

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

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

  1. 메타 태그에 viewport-fit=cover 추가
<!-- 기존 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<!-- 수정 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes,viewport-fit=cover">
  1. 레이아웃의 각 블록마다 좌우 여백에 safe-area-inset-left, safe-area-inset-right 값을 더해서 보정합니다.  기존 좌우 여백값 env(safe-area-inset-left) 값을 더해서 아이폰x의 가로모드일때만 수치가 보정됩니다. 
/* 공통 헤더 */
.logo {
	position: absolute;
	top: 14px;
	left: 25px;
	left: calc(25px + env(safe-area-inset-left));
}

/* 우측 전체메뉴 버튼 */
.btn-menu-open {
	position: absolute;
	top: 0;
	right: 6px;
	right: calc(6px + env(safe-area-inset-right));
}

/* 본문 내용 */
.common-content {
	margin: 0 auto;
	padding: 40px 25px 52px;
	padding-left: calc(25px + env(safe-area-inset-left));
	padding-right: calc(25px + env(safe-area-inset-right));
}

/* 공통 푸터 */
.common-footer {
	padding-top: 28px;
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}