用 JavaScript 观察 phone 的物理方向

Question

我想知道用户是在纵向还是横向模式下实际握住屏幕，即使他们已锁定屏幕。

我无法使用 orientationchange 事件，因为如果旋转被锁定，这些事件将不会触发。我想跟随设备在真实世界中的实际旋转，而不是视口的逻辑方向。

我知道我们通常不应该强制用户显示方向，并且我们应该在用户锁定方向时尊重他们的偏好 - 但我确实确实这样做的理由。

有什么办法吗？

Answer 1

是 - 如果 phone 保持直立。然后我们可以使用 DeviceMotionEvents 读取 phone 的 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');
    }
}

显然，如果 phone 平放或放在 table 上，这将不起作用。在这种情况下，您唯一的机会是在 DeviceOrientationEvent 中使用罗盘数据（但前提是您已经知道您的用户是否面向北方！）

用 JavaScript 观察 phone 的物理方向

Watching a phone's physical orientation with JavaScript

javascript

mobile

orientation

responsive