使用 JavaScript 检测 Android 浏览器中的设备旋转

检测旋转的兼容性挑战

使用 JavaScript 检测设备旋转与具有明确定义方法的 iPhone 相比，Android 手机上的浏览器可能更具挑战性。 Android 设备上的行为可能不一致，事件的顺序和频率以及 screen.width 和 window.orientation 等值的变化。

旋转检测的可靠方法

为了解决这些不一致问题，建议监听 resize 和orientationChange 事件并实施轮询作为安全措施。这种方法确保您最终会收到有效的方向值。

var previousOrientation = window.orientation;
var checkOrientation = function(){
    if(window.orientation !== previousOrientation){
        previousOrientation = window.orientation;
        // Handle orientation change as needed
    }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

// (Optional) Poll for orientation changes on Android (180 degree turns)
setInterval(checkOrientation, 2000);

事件序列和值更改

事件序列和值更改因设备而异。以下表格总结了各种设备的结果：

其他注意事项

虽然此方法提供了检测设备旋转的可靠方法，但重要的是要保持请记住 JavaScript 在这方面的局限性。例如，某些值（例如 screen.width）可能并不总是按预期更改。还建议避免仅依赖 screen.width，因为它在 iOS 设备上的行为不一致。