gpt4 book ai didi

javascript - Webkit JQuery Mobile block 到内联转换不起作用

转载 作者:搜寻专家 更新时间:2023-11-01 04:10:43 25 4
gpt4 key购买 nike

我想改变方向以在移动浏览器上工作。当方向改变时,div“wrapStat”应该在内联显示和 block 显示之间改变。

这个完整的文本 block 每隔 X 秒就会被一个 ajax 调用替换,因此将样式放在 wrapStat 类本身上是行不通的。我正在根据方向更改 portraitCustomStats 和 landscapeCustomStats 之间的父 #CustomStats 类。

这在 Firefox 中有效(调整浏览器大小会翻转方向标志)但在 ajax 调用触发之前在任何 webkit 浏览器中都无效。

webkit 和动态改变内联和 block 样式有问题吗?

CSS:

.portraitCustomStats .StatsRow .wrapStat {
display: block !important;
}
.landscapeCustomStats .StatsRow .wrapStat {
display: inline !important;
}

JavaScript:

$(window).bind('orientationchange', function (anOrientationEvent) {
if ($(window).width() > 600) return;
$("#CustomStats").attr("class", anOrientationEvent.orientation.toLowerCase() + "CustomStats").trigger("updatelayout");
});

HTML:

<span id="CustomStats" class="portraitCustomStats">
<tr class="StatsRow">
<td class="description">Unique Visitors</td>
<td class="stat">
<span class="UniqueVisitors">
<strong>
<div class="wrapStat">
<span class="pastStat">(1,318)</span>
<img src="../../Images/up_arr.gif" alt="increase">
<span class="increasedStat">85.43%</span>
</div>
</span>
</td>
</tr>
</span>

这是代码的 jsFiddle 实际上不起作用...

http://jsfiddle.net/Hupperware/43eK8/5/

手机查看:http://jsfiddle.net/m/rat/

这在 Firefox 中有效(文本在“横向”中变为红色,在“纵向”中变为蓝色,这样您就知道它正在工作)。在 FF 中,当您在更宽的 View 和更窄的 View 之间切换时,它将显示内联和 block ...

在 Webkit(Safari 和 Chrome)中它不会...

最佳答案

我做了一些测试,但无法重现问题。您是否尝试过在 jsfiddle 上测试移动调试功能?

我整理了以下简单示例。

HTML:

<body>
<div id="changeMe">Hello World</div>
</body>

CSS:

.portrait {
display: block !important;
}
.landscape {
display: inline !important;
}
#changeMe {
color: blue;
}

Javascript:

$(document).ready(function() {

$('body').on('orientationchange', function() {
console.log('updated orientation: ' + window.orientation);

if (window.orientation == 0) {
// portrait mode
$('#changeMe').removeClass('landscape').addClass('portrait').text('Portrait Mode');
} else {
// landscape mode
$('#changeMe').removeClass('portrait').addClass('landscape').text('Landscape Mode');
}
});

});​

这是工作 jsfiddle 的链接:http://jsfiddle.net/gizmovation/9ALTU/

当您使用移动调试功能(运行按钮旁边的类似 wifi 的小图标)时,您可以在 iPhone 上打开页面,同时在 PC 上进行调试。当我这样做时,我能够看到 block 样式和内联样式在 #changeMe div 上正确切换。无论内容是否通过 ajax 加载,这都应该有效。

希望这对您有所帮助,并希望您能够使用移动调试器来解决您的问题。

关于javascript - Webkit JQuery Mobile block 到内联转换不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10693333/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com