1

私は、iPhone iOS Safari ブラウザー用の Web サイトを適応させています。コンテンツが両方のデバイスの向きでビューポート全体を占めるようにしたいので、meta[name='viewport']タグを動的に更新しています。

内部でデフォルトで設定したものは次のmeta[name='viewport']とおりです。

<meta name="viewport" content="width=device-width, initial-scale=0.51, minimum-scale=0.51, maximum-scale=0.51" />

次に、ページが読み込まれた直後に、次の JavaScript コードを実行して、ビューポート全体が Web サイトで占有され、中央に配置されるようにします。

var viewport = $("html head meta[name='viewport']");

function switchViewport() {
    var wider = "0.765",
        shorter = "0.51";

    switch (window.orientation) {  
        case 0:  
        case 180:
            viewport.attr("content", "width=device-width, initial-scale=" + wider + ", minimum-scale=" + wider + ", maximum-scale=" + wider + "");
        break; 

        case -90:  
        case 90:  
            viewport.attr("content", "width=device-width, initial-scale=" + shorter + ", minimum-scale=" + shorter + ", maximum-scale=" + shorter + "");
        break;
    }
}

$(window).on("orientationchange", switchViewport);

switchViewport();

実際の iPhone (4、4S)でデバイスを回転させようとしてテストすると、「onorientationchange」が起動されても、最初の turn を除いて、上記のコードで望んだとおりに動作します。向きを変更するために最初にデバイスの回転を行うと、意図したとおりにレンダリングされません。しかし、それ以上回すと正常に戻ります。最初のターンだけ何かで失敗。

ここにウェブサイトがあります: http://goo.gl/VXyBg私が取り組んでいるので、実際の iPhone または単にシミュレーターで直接テストできます。この特別な状況では、シミュレーターは実際のデバイスと比較して同じ結果をもたらさないため、実際のデバイスの方が優れています。

誰かが同様の状況に直面している、または問題がどこにある可能性があるかについての知識、経験を持っている場合、私は本当に感謝しています.

4

0 に答える 0