모바일 디바이스를 사용할 때, 화면 방향이 변경되었을 때 이를 감지하는 방법이 필요할 수 있습니다. 이번 글에서는 자바스크립트를 사용하여 모바일 디바이스의 화면 방향 변경을 감지하는 방법에 대해 알아보겠습니다.

디바이스의 방향 변경 이벤트 감지하기

window.orientation 속성 사용하기

window.orientation 속성은 현재 디바이스의 화면 방향을 나타내는 값을 가지고 있습니다. 이 값을 이용하여 화면 방향이 변경되었는지를 감지할 수 있습니다.

다음은 window.orientation 속성을 사용하여 모바일 디바이스의 화면 방향 변경 이벤트를 감지하는 예제 코드입니다.

window.addEventListener("orientationchange", function() {
  if (window.orientation === 0 || window.orientation === 180) {
    // 세로 방향
    console.log("세로 방향");
  } else if (window.orientation === 90 || window.orientation === -90) {
    // 가로 방향
    console.log("가로 방향");
  }
});

위 코드에서는 orientationchange 이벤트를 감지하여, 현재 window.orientation 값이 0 또는 180이면 세로 방향, 90 또는 -90이면 가로 방향으로 판단하여 로그를 출력합니다.

window.matchMedia() 메서드 사용하기

window.matchMedia() 메서드는 CSS 미디어 쿼리에 대응하는 MediaQueryList 객체를 반환합니다. 이 객체의 matches 속성을 이용하여 현재 디바이스의 화면 방향을 알 수 있습니다.

다음은 window.matchMedia() 메서드를 사용하여 모바일 디바이스의 화면 방향 변경 이벤트를 감지하는 예제 코드입니다.

var mediaQuery = window.matchMedia("(orientation: portrait)");

function handleOrientationChange(mediaQuery) {
  if (mediaQuery.matches) {
    // 세로 방향
    console.log("세로 방향");
  } else {
    // 가로 방향
    console.log("가로 방향");
  }
}

mediaQuery.addListener(handleOrientationChange);
handleOrientationChange(mediaQuery);

위 코드에서는 “(orientation: portrait)” 미디어 쿼리를 사용하여 세로 방향인지 가로 방향인지를 판단합니다. mediaQuery 객체의 matches 속성을 이용하여 현재 화면 방향을 확인하고, 이벤트 리스너를 등록하여 화면 방향이 변경될 때마다 로그를 출력합니다.

결론

자바스크립트를 이용하여 모바일 디바이스의 화면 방향 변경을 감지하는 방법에 대해 알아보았습니다. window.orientation 속성이나 window.matchMedia() 메서드를 활용하여 화면 방향을 감지할 수 있습니다. 이를 활용하여 모바일 웹 앱이나 웹 페이지에서 화면 방향에 따른 적절한 레이아웃이나 동작을 구현할 수 있습니다.