JavaScript를 사용하여 모바일 브라우저에서 방향 변경을 어떻게 감지할 수 있습니까?

JavaScript를 사용하여 모바일 장치에서 브라우저의 방향 변경 감지

최신 모바일 브라우저는 장치 방향의 변화를 감지하는 방법을 제공합니다. 개발자는 사용자 인터페이스를 조정하거나 현재 기반으로 다양한 경험을 제공할 수 있습니다. 방향.

화면 방향 API로 방향 감지

최신 브라우저에서 방향 변경을 감지하는 데 선호되는 방법은 screen.orientation API를 사용하는 것입니다. 이 API는 onchange 이벤트를 노출하는 screenOrientation 인터페이스를 제공합니다. 기기 방향이 변경되면 이 이벤트가 트리거되어 JavaScript 코드가 그에 따라 응답할 수 있습니다.

이 API를 사용하려면 다음을 수행할 수 있습니다.

1. 이벤트 추가 screenorientation.onchange 이벤트에 대한 리스너입니다.
2. 이벤트 핸들러에서 다음을 사용하여 현재 방향을 검색합니다. screen.orientation.type.
3. 방향 값(예: 가로-기본, 세로-보조)을 확인하고 적절한 조치를 취하세요.

다음은 예시 스니펫입니다.

window.addEventListener("DOMContentLoaded", () => {
  const output = document.getElementById("o9n");

  const displayOrientation = () => {
    const screenOrientation = screen.orientation.type;
    output.innerHTML = `The orientation of the screen is: ${screenOrientation}`;
    // Check the orientation and log messages accordingly
  };

  if (screen && screen.orientation !== null) {
    try {
      window.screen.orientation.onchange = displayOrientation;
      displayOrientation();
    } catch (e) {
      output.innerHTML = e.message;
    }
  }
});

위 내용은 JavaScript를 사용하여 모바일 브라우저에서 방향 변경을 어떻게 감지할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!