PWA API - Device Orientation

Device Orientation

중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻한다. 모바일 기기처럼 손으로 들고 다니면서 웹을 접근할 수 있는 기기라면, 이를 통해 화면을 최적화할 수 있다. JavaScript는 이러한 이벤트에 활용할 수 있는 API로 크게 두 가지가 있다.

• DeviceOrientationEvent
• DeviceMotionEvent

 

1) DeviceOrientationEvent

기기 내 가속도계(accelerometer)가 기기의 방향 변화를 감지한다.

 

값의 종류

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

 

예시

// 기기의 방향 변화를 감지하는 이벤트 리스너
window.addEventListener("deviceorientation", handleOrientation, true);

// 기기의 방향 변화가 감지될 때 실행할 함수
function handleOrientation(event) {
  var absolute = event.absolute;  // 지구좌표계를 사용하는 지에 대한 boolean
  var alpha    = event.alpha;  // z축(0 ~ 360도)
  var beta     = event.beta;  // x축 (-180 ~ 180도)
  var gamma    = event.gamma;  // y축 (-90도 ~ 90도)

  // Do stuff with the new orientation data
}

 

2) DeviceMotionEvent

가속도가 변화될 때를 감지한다.

 

값의 종류

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

 

예시

window.addEventListener("devicemotion", handleMotion, true);

function(event) handleMotion{
    let acc = event.acceleration.x;  // x 또는 y 또는 z축에 대한 가속도 (단위는 m/s²)
    let aig = event.accelerationIncludingGravity.x;  // x, y, z축에 대한 중력가속도 (단위는 m/s²)
    let rr = event.rotationRate  // 기기 방향 변화에 대한 비율 (초당 각도)
    let interval = event.interval  // 시간 텀을 나타내는 number (milliseconds)
}

 

축의 의미

• x: 서쪽부터 동쪽으로의 축
• y: 남쪽부터 북쪽으로의 축
• z: 지면으로 부터 수직인 축

 

MDN 문서

https://developer.mozilla.org/en-US/docs/Web/Events/Detecting_device_orientation

Detecting device orientation - Event reference | MDN