[css] env()

env()

 

iOS 브라우저에서 뷰포트 안전 영역에 컨텐츠 배치 위한 4가지 환경변수

(아이폰X 이상에서만 동작하며 그 외 디바이스에서는 영향 주지 않음)

safe-area-inset-*
env(safe-area-inset-left)
env(safe-area-inset-right)
env(safe-area-inset-top)
env(safe-area-inset-bottom)

대체값 사용시 (px, em, rem, vh 모두 가능)
env(safe-area-inset-top, 20px);

※ iOS 11.0 버전에서는 아래와 같이 사용
constant(safe-area-inset-left)
constant(safe-area-inset-right)
constant(safe-area-inset-top)
constant(safe-area-inset-bottom)


브라우저 호환성
크롬, 엣지, 파이어폭스, 오페라, 사파리, 크롬 안드로이드, 파이어폭스 안드로이드, 오페라 안드로이드, 사파리 사용 가능