Question

当谈到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;
    }

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-block div。包装器以父对象为中心，并且包装到父对齐的下一行离子的任何子div。这可以按预期工作。

我在这个设置中遇到的问题是，当一个孩子换到下一行时，父母右侧有很多空白区域。

我编写了jquery函数，它首先查看每个子div。当它检测到一个孩子已经包裹时，它会在它自身之前添加一个<div class="dummy"></div>元素，这基本上会创建一个“换行符”。这将删除父级右侧的空白区域，从而将父级重新定位到视图的正中心。在“orientationchange”事件中调用此函数，删除之前找到的任何虚拟div。

现在我的问题 - 在Android 2.3浏览器上，从纵向模式切换到横向模式不会将父宽度扩展到超出纵向模式的宽度。显然，如果我第一次在横向模式下加载页面，它会正确呈现，但第二次切换到纵向，然后回到横向，问题会返回。

对不起，这很冗长，但我真的想找到一个解决方案，并尝试了很多东西，甚至将父级的max-width设置为一些硬编码的大值，但没有骰子。

提前感谢大家的帮助！

Android 2.3 Stock浏览器：内联块不扩展“orientationchange”事件

0 个答案: