카테고리 없음
iPhone 노치 safe-area
냐옴
2022. 6. 15. 15:24
https://velog.io/@devcmkim/IOS-%EB%85%B8%EC%B9%98%EB%8C%80%EC%9D%91-Css
IOS 노치대응 (safe-area)
IOS 노치대응
velog.io
viewport 메타태그에 viewport-fit=cover 내용 추가
<meta name="viewport" content="..., viewport-fit=cover">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)css 적용
#header_wrap {
margin-top: calc(constant(safe-area-inset-top) + 15px);
margin-top: calc(env(safe-area-inset-top) + 15px);
}