아이폰용 하이브리드앱을 개발하다보면 webview와 상단 노치 때문에 항상 문제가 생긴다.
자바스립트로 노치값을 가져오면 편리할 것이다.
노치값은 ios에서 css에서 가져올 수 있지만, 자바스크립트로 별도로 가져오는 방법은 없다.
해서 css에 있는 노치값을 자바스크리브로 가져오는 방법을 사용해야 한다.
먼저 노치값을 css에 변수처리한다.
:root {
--sat: env(safe-area-inset-top);
--sar: env(safe-area-inset-right);
--sab: env(safe-area-inset-bottom);
--sal: env(safe-area-inset-left);
}
이 변수 값을 자바스크립트로 가져온다.
getComputedStyle(document.documentElement).getPropertyValue("--sat")