Die physische Ausrichtung eines Telefons mit JavaScript beobachten

Question

Ich möchte wissen, ob der Benutzer seinen Bildschirm im Hoch- oder Querformat hält, auch wenn er seinen Bildschirm gesperrt hat.

Ich kann orientationchange Ereignisse nicht verwenden, da diese nicht ausgelöst werden, wenn die Rotation gesperrt ist. Ich möchte der tatsächlichen realen Drehung des Geräts folgen, nicht der logischen Ausrichtung des Ansichtsfensters.

Ich bin mir bewusst, dass wir normalerweise eine Displayausrichtung auf unsere Benutzer nicht zwingen sollten, und dass wir die Präferenzen der Benutzer respektieren sollten, wenn sie die Ausrichtung sperren - aber ich habe wirklich einen Grund, dies zu tun.

Gibt es jemals einen Weg?

Answer 1

Ja - wenn das Telefon aufrecht gehalten wird. Dann können wir DeviceMotionEvents verwenden Sie den Zug der Schwerkraft auf dem Telefon des X zu lesen und Y-Achse:

function watchOrientation(subscriber) { 
    if (window.DeviceMotionEvent) { 
     window.addEventListener('devicemotion', eventData => { 
      const hg = eventData.accelerationIncludingGravity.x; 
      const vg = eventData.accelerationIncludingGravity.y; 

      if (vg > 5) { 
       subscriber('up'); 
      } else if (vg <= -5) { 
       subscriber('down'); 
      } else if (hg > 0) { 
       subscriber('left'); 
      } else if (hg <= 0) { 
       subscriber('right'); 
      } 

     }, true); 
    } else { 
     console.warn('Device does not support "devicemotion" events'); 
    } 
} 

Offensichtlich wird dies nicht funktionieren, wenn das Telefon flach gehalten wird oder auf einen Tisch gelegt. In diesem Fall ist Ihre einzige Chance, die Kompassdaten in einem DeviceOrientationEvent zu verwenden (aber nur, wenn Sie bereits wissen, ob Ihr Benutzer nach Norden ausgerichtet ist!)