Android 2.3股票浏览器:内联块不在“上展开”;“方向改变”;事件
当我的网站在安卓2.3上改变方向时,我现在遇到了一个有趣的问题。它严格适用于移动设备,并对Android 2.3+股票浏览器提供必要的支持。见下文 HTML: JQuery:Android 2.3股票浏览器:内联块不在“上展开”;“方向改变”;事件,android,jquery,html,css,Android,Jquery,Html,Css,当我的网站在安卓2.3上改变方向时,我现在遇到了一个有趣的问题。它严格适用于移动设备,并对Android 2.3+股票浏览器提供必要的支持。见下文 HTML: JQuery: $(window).resize(function () { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(function(){ $("#parent > .dummy").remove();
$(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();
});
$(窗口)。调整大小(函数(){
clearTimeout(resizeTimeout);
resizeTimeout=setTimeout(函数(){
$(“#parent>.dummy”).remove();
var currentOffset=$(“#父项>#子项:第一个子项”).offset().top;
$(“#父项>子项”)。每个(函数(){
if(currentOffset!=$(this).offset().top)
{
$(“”)。在此之前插入;
currentOffset=$(this).prev().offset().top;
}
});
}, 500);
});
$(窗口).bind(“方向更改”,函数(){
$(窗口).resize();
});
基本上,上面的代码父级包含一组内联块
div。包装器使父对象居中,包装到父对象下一行的任何子div都是左对齐的。这正如预期的那样有效
我在这种设置中面临的问题是,当孩子换行到下一行时,家长的右手边有大量的空白
我编写了jquery函数,它首先查看每个子div。当它检测到一个子div已包装时,它会在其前面添加一个
元素,这基本上会创建一个“换行符”。这会删除父div右侧的空白,从而将父div重新定位到视图的中心。在“orientationchange
”事件中调用此函数,删除之前发现的任何虚拟div
现在我的问题是——在安卓2.3浏览器上,从纵向模式切换到横向模式不会使父对象的宽度超出纵向模式的宽度。显然,如果我第一次以横向模式加载页面,它会正确呈现,但第二次我切换到纵向,然后返回横向,问题会再次出现
抱歉,这太长了,但我真的很想找到一个解决方案,并尝试了很多方法,甚至将父对象的最大宽度设置为一些硬编码的大值,但没有骰子
提前感谢大家的帮助
#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();
});