Test

안드로이드폰에서 안전 영역(노치 영역)을 구하는 방법을 정리해볼게.

1. 안드로이드 기기 확인
먼저, JavaScript로 사용자가 안드로이드 기기를 사용하는지 확인할 수 있어.

const isAndroid = /Android/i.test(navigator.userAgent);


2. 안전 영역 계산
안드로이드 기기라면 window.visualViewport API를 사용해 뷰포트의 위치를 감지하여 노치나 안전 영역을 계산할 수 있어. 아래 코드는 visualViewport API를 사용하여 각 방향(top, right, bottom, left)의 안전 영역을 계산해.

function getSafeAreaInsets() {
    const insets = {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    };

    if (window.visualViewport) {
        const viewport = window.visualViewport;
        insets.top = viewport.pageTop;
        insets.bottom = window.innerHeight - viewport.height - viewport.pageTop;
        insets.left = viewport.pageLeft;
        insets.right = window.innerWidth - viewport.width - viewport.pageLeft;
    }

    return insets;
}


3. 안드로이드에서만 실행
이제 안드로이드 기기에서만 안전 영역을 계산하고 활용하도록 조건을 추가할 수 있어.

if (isAndroid) {
    const safeAreaInsets = getSafeAreaInsets();
    console.log("안드로이드에서 감지된 안전 영역:", safeAreaInsets);
    // safeAreaInsets 값을 사용하여 스타일을 조정할 수 있음
}



이제 HTML 상단에 이 스크립트를 추가하여 안드로이드 기기에서만 안전 영역을 구할 수 있어. 필요한 경우 safeAreaInsets 객체의 값을 CSS로 전달하여 스타일을 조정할 수 있어.