2

Android 2.3での向きの変更に関して、現在、私のWebサイトで興味深い問題が発生しています。Android 2.3+ ストック ブラウザの必要なサポートを備えたモバイル専用です。下記参照..

HTML:

<div id="wrapper">
    <div id="parent">
        <div id="child">
        </div>
    </div>
</div>

CSS:

#wrapper
    {
    text-align: center;
    }
#parent
    {
    display: inline-block;
    text-align; left;
    }

.dummy
    {
    display: block;
    height: 0;
    }

JQuery:

$(window).resize(function () {
        clearTimeout(resizeTimeout);

        resizeTimeout = setTimeout(function(){
            $("#parent > .dummy").remove();

            var currentOffset = $("#parent > #child:first-child").offset().top;

            $("#parent > #child").each(function() {
                if (currentOffset != $(this).offset().top)
                    {
                    $("<div class=\"dummy\"></div>").insertBefore(this);
                    currentOffset = $(this).prev().offset().top; 
                    }
            });

        }, 500);
});

$(window).bind("orientationchange", function() {
        $(window).resize();
});

基本的に、上記のコードの親は多数のinline-blockdiv を保持しています。ラッパーは親を中央に配置し、親の次の行にラップする子 div はすべて左揃えになります。これは期待どおりに機能します。

この設定で私が直面する問題は、子が次の行に折り返すときに、親の右側にかなりの量の空白があることです。

最初に各子divを調べるjquery関数を書きました。子が折り返されたことを検出すると、それ自体の直前に要素を追加します<div class="dummy"></div>。これにより、基本的に「改行」が作成されます。これにより、親の右側の空白が削除され、親がビューの中心に再配置されます。この関数は " orientationchange" イベントで呼び出され、以前に見つかったダミーの div を削除します。

今私の問題 - Android 2.3 ブラウザーでは、縦向きモードから横向きモードに切り替えても、縦向きモードの幅を超えて親の幅が拡大されません。明らかに、横向きモードで初めてページをロードすると、正しくレンダリングされますが、2 番目に縦向きに切り替えてから横向きに戻すと、問題が再発します。

申し訳ありませんが、これは長くなりますが、私は本当にこれに対する解決策を見つけたいと思っています.

事前にみんなの助けをありがとう！

4

0 に答える 0