[javascript] 모바일 디바이스의 회전 정보 가져오기

05 Dec 2023

javascript

모바일 디바이스의 회전 정보를 가져오는 방법에 대해 알아보겠습니다. 회전 정보를 이용하면 사용자의 디바이스가 세로 모드인지 가로 모드인지 확인할 수 있습니다. 이는 웹 애플리케이션에서 다양한 레이아웃 및 스타일을 적용하기 위해 유용합니다.

1. 윈도우 단말 회전 이벤트 감지하기

윈도우 단말에서는 window.orientation 속성을 통해 현재 디바이스의 회전 상태를 확인할 수 있습니다. 이 속성은 다음과 같이 사용할 수 있습니다.

if(window.orientation === 0 || window.orientation === 180) {
    // 세로 모드
    console.log('세로 모드입니다.');
} else if(window.orientation === 90 || window.orientation === -90) {
    // 가로 모드
    console.log('가로 모드입니다.');
}

이 코드는 현재 디바이스의 회전 상태를 확인하고, 세로 모드인 경우 “세로 모드입니다.”를 출력하고, 가로 모드인 경우 “가로 모드입니다.”를 출력합니다.

2. 모바일 디바이스의 회전 이벤트 감지하기

모바일 디바이스에서는 orientationchange 이벤트를 통해 회전 정보를 감지할 수 있습니다. 이 이벤트는 디바이스의 회전이 변경될 때마다 발생합니다. 다음은 orientationchange 이벤트를 사용하는 예제입니다.

window.addEventListener('orientationchange', function() {
    if(window.orientation === 0 || window.orientation === 180) {
        // 세로 모드
        console.log('세로 모드입니다.');
    } else if(window.orientation === 90 || window.orientation === -90) {
        // 가로 모드
        console.log('가로 모드입니다.');
    }
});

이 코드는 디바이스의 회전이 변경될 때마다 현재 회전 상태를 확인하고, 세로 모드인 경우 “세로 모드입니다.”를 출력하고, 가로 모드인 경우 “가로 모드입니다.”를 출력합니다.

결론

본 글에서는 모바일 디바이스의 회전 정보를 가져오는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션에서 사용자의 디바이스 회전 상태에 따라 다양한 레이아웃 및 스타일을 적용할 수 있습니다.

더 자세한 정보를 원하시면 다음 문서를 참고하시기 바랍니다.