아이폰 X 출시 이후에 올해는 다양한 이어서 아이폰 xs, 아이폰xr 등 나왔다. 그러면서 노치(Notch)영역 해결방법들도 많이 나오고 있는데 이에 짧게 소개하려고 한다.

정말 간단히 설명하면 HTML 메타태그에 아래와 같이 삽입하면 된다. 기존에 메타에서 viewport-fit=cover만 넣으면 되는 것이다.

출처 – Webkit

HTML Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

CSS 적용

  • safe-area-insset-top:위쪽 inset
  • safe-area-inset-right: 오른쪽 inset
  • safe-area-inset-bottom: 아래쪽 inset
  • safe-area-inset-left: 왼쪽 inset
/* 공통 헤더 */
.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);
}