JavaScript에서 장치 방향을 감지하는 가장 쉬운 방법

이 게시물에서는 JavaScript를 사용하여 웹에서 장치 방향을 감지하는 가장 쉬운 방법을 살펴보겠습니다.

이것은 모든 주요 브라우저(Safari 포함)와 호환되며 모바일/태블릿 장치에서 작동합니다.

비디오 자습서

동영상 시청을 선호하는 경우 YouTube에서 아래의 4분 자습서를 찾을 수 있습니다.



좋아요, 이것이 얼마나 쉬운지 보여드리겠습니다.

matchMedia()로 세로/가로 모드 감지

window.matchMedia(...)를 사용하여 세로 모드인지 감지할 수 있습니다. 여기서 가장 좋은 점은 세로 모드가 아닌 경우 가로 모드여야 한다는 것입니다.

const portrait = window.matchMedia("(orientation: portrait)").matches;

// portrait = `true` or `false` 😮

위의 기술을 사용하여 사용자가 현재 시점에서 세로 모드에 있는지 감지할 수 있습니다.

하지만 사용자가 장치 방향을 변경할 때 반응하고 싶다면 어떻게 해야 할까요? 여기에는 모바일 장치를 회전할 때도 포함됩니다.

이것은 addEventListener 를 사용하여 쉽게 수행할 수 있습니다.

window.matchMedia("(orientation: portrait)").addEventListener("change", e => {
    const portrait = e.matches;

    if (portrait) {
        // do something
    } else {
        // do something else
    }
});

그리고 그게 다야! 아주 쉽게 😎

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1



즐기다.