getSafeArea() : 아이폰X safe-area

이전에 아이폰X 노치영역에 대응하여 최적화하는 CSS기법을 소개했었습니다. 사실 요즘은 물리적 홈 버튼이 제거 되면서 노치 영역 뿐만 아니라 홈 버튼 영역도 문제되지 않게 처리해줘야 하는데요.

이번엔 자바스크립트로 상하좌우의 안전영역 수치를 알아내는 함수를 만들었습니다.
– Demo : https://dohoons.com/test/getSafeArea/ (아이폰X에서 확인가능)

getSafeArea 함수는 뷰포트 설정이 viewport-fit=cover 일 때 { top: 0, right: 44, bottom: 21, left: 44 } 와 같이 수치가 담긴 object를 리턴합니다.