0

iPhoneで表示の問題が報告されています。持っていません。誰かアイデアがあったかしら。

私のウェブサイトで。トラブルの原因はURLバーのようです。androidでは、関数$(window).height()は戻ります（画面の高さ-URLバー）。iOSでは、これを行っているようには見えません。

私のサイトでは、URLバーを過ぎてページをスキップしています。次に、画像を全画面表示にして中央に配置します。（仕様上の制限があるため、Javascriptを使用する必要があります）

Androidでは、画像は画面の表示領域にサイズ変更されます。iPhoneでは、使用可能な高さ（URLバー）にサイズ変更されます。これにより、画像が小さすぎて下部に隙間ができます。少なくともこれは私の問題の理解です。

iPhoneのスクリーンショット。

URLバー付き
URLバー付き

URLバーなし
URLバーなし

これは私が画像のサイズを変更するために使用しているものです。

window.scrollTo(0, 1);
function setImageSize() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();

    $('.photo-slide img').each(function() {
        var width = $(this).attr('data-width');
        var height = $(this).attr('data-height');

        if (width > windowWidth) {
            var ratio = windowWidth / width;
            width = windowWidth;
            height = height * ratio;
        }

        if (height > windowHeight) {
            var ratio = windowHeight / height;
            height = windowHeight;
            width = width * ratio;
        }

        var marginTop = 0;
        var marginLeft = 0;

        if (windowHeight > height) {
            marginTop = (windowHeight - height) / 2;
        }
        if (windowWidth > width) {
            marginLeft = (windowWidth - width) / 2;
        }

        $(this).css({
            'margin-left':marginLeft+'px',
            'margin-top':marginTop+'px',
            'width':width+'px',
            'height':height+'px'
        })
    })
}

誰かがこれに遭遇したことがありますか？これを修正して、URLバーが表示されていないときに画像が画面全体に表示されるようにするにはどうすればよいですか。

4

1 に答える 1

0

100ミリ秒などに設定されたsetTimeoutでsetImageSize（）を呼び出すと、iPhoneは正しい画面の高さを提供しますか？これは少し前の問題だったことを思い出します。

または、window.navigator.userAgent.indexOf（'iPhone'）を使用してiPhoneかどうかを確認し、URLバーの高さを画像の高さに追加することはできませんか？

于 2013-02-28T11:45:58.150 に答える