モバイルブラウザで動作するように向きを変更する必要があります。向きが変わると、div「wrapStat」はインライン表示とブロック表示の間で変わるはずです。
この完全なテキストブロックは、X秒ごとにajax呼び出しに置き換えられるため、wrapStatクラス自体にスタイルを設定することはできません。方向に応じて、portraitCustomStatsとlandscapeCustomStatsの間で親の#CustomStatsクラスを変更しています。
これはFirefoxで機能します(ブラウザーのサイズを変更すると方向フラグが反転します)が、ajax呼び出しが発生するまでWebkitブラウザーでは機能しません。
Webkitと、インラインスタイルとブロックスタイルの動的な変更に問題はありますか?
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では、広いビューと狭いビューの間を移動すると、インラインでブロックされます...
Webkit(SafariおよびChrome)では...