使用 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中使用指南针数据(但前提是您已经知道您的用户是否朝北！