2

私は自分のサイトにメタルールを追加しているので、ipad はすべてを縮小します。ユーザーが向きを縦向きに変更したとき、またはユーザーが縦向きモードでページを読み込んだときに、これを横向きモードでのみ発生させたいのですが、縮尺をに変更したい1 とページ全体が収まるようにスケーリングされます。

このコードを使用しました。

if(ipad){
            window.onorientationchange = function() {

                var orientation = window.orientation;
                var location = window.location.href;
                gallery.rescale();
                if (orientation === 0) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').removeClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').addClass('next-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(1)').removeClass('next-thumb');



                    $("body").addClass("portrait");

                } else if (orientation === 90) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').removeClass('last-thumb')
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').removeClass('next-thumb');

                    $("body").removeClass("portrait");                      

                } else if (orientation === -90) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').removeClass('last-thumb')
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').removeClass('next-thumb');

                    $("body").removeClass("portrait");


                } else if (orientation === 180) {
                    $('.galleria-thumbnails .galleria-image:nth-child(5n+5)').removeClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+4)').addClass('last-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(4n+1)').addClass('next-thumb');
                    $('.galleria-thumbnails .galleria-image:nth-child(1)').removeClass('next-thumb');

                    $("body").addClass("portrait");

                }
            }       
        }

これにより、行ごとのサムネイルを縦向きと横向きの間で変更でき、うまく機能します。

<meta name="viewport" content="width=device-width, initial-scale=0.85" />各方向変更ルールを追加しようとしましたが、機能しません。

理由についてのアイデアはありますか？この問題の解決策があるかどうかを知りたいです。

ご協力ありがとうございました

4

1 に答える 1

0

ページの読み込み時にポートレートを追加/削除する必要があることがわかりました。そうしないと、向きが正しく再スケーリングされません。

***ありがとうティーワネ

于 2012-11-21T17:11:57.520 に答える