Webkit JQueryモバイルブロックがインライントランジション機能を果たさない

Question

モバイルブラウザで動作するように向きを変えたいと思っています。方向が変更されると、divの "wrapStat"はインラインとブロック表示の間で変更されます。

この完全なテキストブロックは、X秒ごとにajax呼び出しで置き換えられます。したがって、wrapStatクラス自体にスタイルを設定すると機能しません。私は方向に応じて、親の#CustomStatsクラスをportraitCustomStatsとlandscapeCustomStatsの間で変更しています。

これは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でそれは...

Answer 1

...

オリジナル：

あなたは上のレイアウトを変更しようとすると、スパンのdivをラップ有するWebKitのに望ましくない行動を起こすことが表示されます

<tr class="StatsRow"> 
    <td class="description">Total Sales</td> 
    <td class="stat"> 
      <span class="TotalSalesRow"> 
       <strong>$59,549.16</strong> 
       <div class="wrapStat"> 
        <span class="pastStat">($59,799.66)</span> 
        <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
        <span class="decreasedStat">0.42%</span> 
       </div> 
      </span> 
     </td> 
</tr> 

含有div。

変更：（第二TD以下のdivタグ）

<tr class="StatsRow"> 
    <td class="description">Total Sales</td> 
    <td class="stat"> 
      <div class="TotalSalesRow"> 
       <strong>$59,549.16</strong> 
       <div class="wrapStat"> 
        <span class="pastStat">($59,799.66)</span> 
        <img src="https://portal.thesba.com/Images/down_arr.gif" alt="decrease"> 
        <span class="decreasedStat">0.42%</span> 
       </div> 
      </div> 
     </td> 
</tr> 

Answer 2

は、両方のあなたから!importantを削除しようとしません...のWebkit（Safariとクローム）で

をインラインやブロックが表示されますCSSクラス。

Answer 3

ブラウザでのWebkitの処理については言いません。私が言うことができることは、デバイスやブラウザでオリエンテーションチェンジが異なって検出されるということです。これは頭​​痛を引き起こす可能性があります...（example）。

最後に、Androidがいつも「間違った」姿勢（横長の風景、縦長の風景）を返すため、私は自分の髪を引っ張った。

JQM recommendsは、幅/高さとorientationchangeで作業する場合の代わりに、orientationchangeのサイズを変更と結合することが理由です。 Resizeはすべてのorientationchangeと共に起動しますので、ブラウザのイベントの実装とは独立しています。

私の最初の提案は次のようなものです：代わりにサイズを変更するためにバインドできますか？あなたはorientationchangeに固執したい場合

は、[OK]をここで動作しているようです私が使用しているスクリプトを、次のとおりです。

// trigger 
$(window).on('orientationchange', function(event){ 
     your_function(event); 
     }); 

// function handling orientation 
function your_function(event) { 
    ... 
    if (event) { 
     // portrait 
     if (window.orientation == 0 || window.orientation == 180){ 
       // portrait stuff 
     } 
     // landscape 
      else if (window.orientation == 90 || window.orientation == -90) { 
       // landscape stuff 
       } 
     // any other event that's passed into here, you could feed RESIZE 
     } else if ($window.width() < THRESHOLD WIDTH) { 
       // portrait stuff 
       } else if ($window.width() > THRESHHOLD WIDTH) { 
          // landscape stuff 
          } 
       } 

を今、私はこれだけの機能にorientationchangeを供給することだし、それはに思えますうまく動作します。第二ハンドラになってしまいます

$(window).on('resize', function(event){ 
    your_function("I'm no event"); 
    }); 

：それはないならば、私はまた、サイズ変更でこれをトリガし、そのようなイベントを渡していないに変更することができます。レイアウトが変更されるはずのしきい値幅（600px？）が必要です。

これが役に立ちます。

Answer 4

高解像度デバイスをターゲットにしたくないif ($(window).width() > 600) return;は何ですか？

私は間違っているかもしれませんが、paysageとほとんどのrecntアンドロイドとiphone（> HVGAとIphoneの網膜）の場合は、このイベントハング機能を終了しませんか？

Answer 5

私はいくつかのテストを行いましたが、問題を再現できませんでした。 jsfiddleでモバイルデバッグ機能をテストしようとしましたか？

以下の簡単な例をまとめます。

HTML：あなたが使用している場合http://jsfiddle.net/gizmovation/9ALTU/

：

<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へのリンクありモバイルデバッグ機能（実行ボタンの横にある小さなwifiのアイコン）を使用すると、自分のPC上で同時にデバッグしながら、iphoneでページを開くことができます。これを実行すると、ブロックとインラインスタイルが#changeMe divで正しく切り替えられていることがわかりました。これは、コンテンツがajax経由でロードされたかどうかにかかわらず動作するはずです。

これが役に立ち、モバイルデバッガを使用して問題を解決できることを願っています。

Answer 6

あなたの上に貼り付けたあなたのHTMLは台無しです。閉鎖されていない強いタグがあります。おそらく強力なタグを付けてはいけません。そうした場合は、divタグの中に入れてください。あなたはtrでラップされている。これは構文的には間違っていますが、私はそれが確実にレンダリングされないことに驚くことはありません。スパンはデフォルトではインラインであり、次にインライン要素の内側にtrを入れます。これはどのようにレンダリングされると思いますか？可能ならば、trとtdを完全に削除し、代わりにfloat divを使用してみてください。絶対にテーブルを使用する必要がある場合は、テーブルを正しく構築してください。マークアップを簡略化してみてください。マークアップが複雑になればなるほど、エラーの余地が増します。複数のマークアップエラーがある場合、さまざまなブラウザがさまざまな方法で悪いマークアップを処理する可能性があります。 div（ブロックのデフォルト）をtd（ブロック）の内側のスパン（インライン）の内側に（デフォルトではインラインで）strongの内部に持つ理由はありません。マークアップを単純化してクリーンアップすると、問題は消えてしまうと思います。がんばろう。私は答えを見つけたと信じて