使用JavaScript觀看手機的物理方位

Question

我想知道用戶是否在縱向或橫向模式下手持屏幕，即使他們鎖定了屏幕。

我不能使用orientationchange事件，因爲如果旋轉鎖定，這些事件不會觸發。我想遵循設備的實際旋轉，而不是視口的邏輯方向。

我知道，我們通常不應該強迫我們的用戶顯示方向，並且我們應該在鎖定方向時尊重用戶的偏好 - 但我真的做有理由這樣做。

有沒有辦法？

Answer 1

是 - 如果手機保持直立。然後我們可以使用DeviceMotionEvents閱讀引力對手機的X和Y軸：

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'); 
    } 
} 

顯然，如果手機持平或放在桌子上這是不行的。在這種情況下，您唯一的機會就是使用DeviceOrientationEvent中的指南針數據（但前提是您已知道您的用戶是否面向北方）