2

当涉及到 android 2.3 上的方向更改时，我的网站目前有一个有趣的问题。它仅适用于移动设备，对 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;
    }

查询：

$(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 浏览器上，从纵向模式切换到横向模式不会将父级的宽度扩大到超出纵向模式的宽度。显然，如果我第一次以横向模式加载页面，它会正确呈现，但第二次我切换到纵向，然后再回到横向，问题又回来了。

对不起，这很长，但我真的很想找到一个解决方案，并且尝试了很多事情，甚至将父级的最大宽度设置为一些硬编码的大值，但没有骰子。

提前感谢大家的帮助！

4

0 回答 0