javascript - window.orientation 在 iOS 和 Android 中返回不同的值

Question

我正在 iPad (Safari 浏览器) 和 Samsung Tab 2 (默认浏览器) 上测试我的 Web 应用程序>。 window.orientationchange 在两个设备中返回不同的值。

$(document).ready(function() {
            window.addEventListener("orientationchange", centerLoginBox);
            window.addEventListener("load", centerLoginBox);
        });

        function centerLoginBox() {
            if (window.orientation == 90 || window.orientation == -90) { //Landscape Mode
                $('#loginbox').css('margin-top', '20%');
                alert(window.orientation);
            }
            else if (window.orientation == 0 || window.orientation == 180) { //Portrait Mode
                $('#loginbox').css('margin-top', '40%');
                alert(window.orientation);
            }

在选项卡 2 中，风景 模式警报抛出“0”和“180”，肖像 模式警报抛出值“90”和“-90”(在 iPad 中恰恰相反)。

这是 iOS 和 Android 的某种设计差异吗？这个问题的通用解决方案是什么？

Answer 1

好的，这就是我所做的。我查询了用户代理信息并检查了该设备是否基于 Android。如果是这样，请更改纵向和横向模式的 window.orientation 条件。

代码

function centerLoginBox() {
        var ua = navigator.userAgent.toLowerCase();
        var isAndroid = ua.indexOf("android") > -1; // Detect Android devices
        if (isAndroid) {
            //window.orientation is different for iOS and Android
            if (window.orientation == 0 || window.orientation == 180) { //Landscape Mode
                $('#loginbox').css('margin-top', '20%');
            }
            else if (window.orientation == 90 || window.orientation == -90) { //Portrait Mode
                $('#loginbox').css('margin-top', '40%');
            }
        }
        else {
            if (window.orientation == 90 || window.orientation == -90) { //Landscape Mode
                $('#loginbox').css('margin-top', '20%');
            }
            else if (window.orientation == 0 || window.orientation == 180) { //Portrait Mode
                $('#loginbox').css('margin-top', '40%');
            }
        }
    }