safe-area-inset값 자바스크립트로 가져오기

pixgram·2022년 5월 4일
1

아이폰용 하이브리드앱을 개발하다보면 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")
profile
Interactive Front-end Developer and WebGL Artist

0개의 댓글