1

何も重くしたくないので、かなり単純なjQueryモーダルを作成しました。モーダルは、iPad を除くすべてのブラウザーで正常に動作します。

ページの下部にいるときにクリックしてライトボックスを開くと、ページの上部に表示されなくなります。

私はウィンドウを配置するためにjQueryを使用していません。純粋なcssだけです.iPad以外の他のすべてのブラウザでこれが機能する理由を誰でも見ることができますか?

＃ライトボックス {
    位置:固定; /* ライトボックス ウィンドウを現在のビューポートに保持します */
    上:0;
    左：0;
    幅:100%;
    高さ:100%;
    Z インデックス: 2;
    背景色: rgba(0, 0, 0, 0.2);
    フォントの太さ: 100;
    マージン: 0 0 .1em 0;
    色: #f8ef71;
    text-shadow: 1px 1px 1px #af7913;
    テキスト整列: 中央;
}
4

2 に答える 2

2

position:fixed は普遍的にサポートされているわけではありません。あなたの iOS バージョンはバージョン 5 未満であると思います。これをサポートする最初の iOS リリースはどれですか? このモーダルは IE6&7 にもありません。ビューポート メタ タグを介してズームを無効にしないと、Android 2.3 以下でも機能しません。

position:fixed で直面するもう 1 つの問題は、それがビューポートではなくウィンドウに対して相対的であるため、要素をズームすると、希望どおりに表示されないことです。これが、ズームを無効にせずにAndroid 2.3で固定を無効にした理由です（またはそう信じています）が、後のAndroidリリースでこれに関する位置を変更しました。

関連する質問は次のとおりです: CSS "position: fixed;" iPad/iPhoneで？

于 2012-05-15T09:26:04.927 に答える
1

バージョン 5 より前の iOS での位置修正の問題について警告してくれた Ed Kirk に感謝します。

問題を解決するために小さなJSを書きました

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod')
        {
            var cssObj = {
                '背景色' : 'rgba(0, 0, 0, 0)',
                '位置' : '絶対',
                「トップ」: $(ドキュメント).scrollTop()
            };

            $('#lightbox').css(cssObj);
            $(window).scroll(function() {$('#lightbox').animate({top: $(document).scrollTop()}, 300);});
        };
于 2012-05-15T10:17:32.523 に答える