6

我正在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的某种设计差异吗？这个问题的常见解决方案是什么？

4

2 回答 2

3

好的，这就是我所做的。我查询了用户代理信息并检查了设备是否基于 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%');
            }
        }
    }
于 2012-12-26T05:49:00.053 回答
0

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

于 2012-12-24T10:48:11.500 回答