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

この質問の2番目の回答で述べたように、2つのリスナーを割り当てることができます。1つは向きの変更用で、もう1つは画面の幅/高さの値のサイズ変更用です。このように、回転の値は異なるデバイスで一貫していないため、これらの値に依存する必要はありません。

于 2012-12-24T10:48:11.500 に答える