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

Question

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

6

我正在测试我的Web应用程序在（Safari浏览器）和三星平板2 （默认浏览器）上。在这两个设备上，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);
            }

在第二个选项卡中，警报在iPad中对竖屏模式会抛出'90'和'-90'的值，而对横屏模式则是'0'和'180'的值（与此相反的行为）。这是否是iOS和Android之间的设计差异？有什么通用解决方案可以解决这个问题吗？

- Sayan

在我的测试 iPad、iPhone 和 Nexus 4 上，所有设备的返回值都相同：正常竖屏为 0，逆时针横屏为 90，顺时针横屏为 -90，倒立竖屏为 180。 - Tamlyn

2个回答

0

如this问题的第二个答案中所提到的，您可以分配两个监听器：一个用于方向更改，另一个用于屏幕宽度/高度值的调整。这样，您就不必依赖旋转值，因为在不同设备上它们是不一致的。

- Androidz

1

但是 window.orientation 的值仍然会不同......问题仍然存在。 - Sayan

2

这篇文章解释了关于不同设备上窗口方向值的一些细节，具体请参考此链接。 - Chaquotay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sayan · Accepted Answer

好的，这是我所做的。我查询了用户代理信息并检查设备是否基于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%');
            }
        }
    }