5

モバイルブラウザで動作するように向きを変更する必要があります。向きが変わると、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）では...

4

6 に答える 6

3

いくつかのテストを行いましたが、問題を再現できませんでした。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のアイコン）を使用すると、PCで同時にデバッグしながら、iPhoneでページを開くことができます。これを行ったとき、ブロックスタイルとインラインスタイルが#changeMedivで適切に切り替わっていることを確認できました。これは、コンテンツがajax経由でロードされたかどうかに関係なく機能するはずです。

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

于 2012-05-25T15:10:32.983 に答える
2

私は答えを見つけたと思います...

オリジナル：

<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をラップすると、それを含むdivのレイアウトを変更しようとすると、Webkitで望ましくないアクションが発生するようです。

変更:(2番目の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>
于 2012-05-29T16:22:45.723 に答える
0

!important両方のcssクラスからを削除してみてください。

于 2012-05-24T03:46:06.133 に答える
0

ブラウザでのWebkitの処理については言えません。私が言えることは、方向の変化はデバイスやブラウザ間で異なって検出されるということです。これは頭​​痛を引き起こす可能性があります...（例）。

前回、Androidが常に「間違った」向き（横向きのポートレート、縦向きの横向き）を返したため、iOSがその逆を報告したときに、髪を抜いた。

そのため、JQMは、幅/高さおよび方向変更を操作するときに、方向変更ではなくサイズ変更にバインドすることを推奨しています。サイズ変更はすべてのorientationchangeと一緒に実行されるため、イベントのブラウザー実装に依存しません。

だから私の最初の提案は次のようになります：代わりにサイズ変更にバインドできますか？

向きの変更に固執したい場合は、これが私が使用しているスクリプトです。これは問題なく機能しているようです。

// 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");
     });

これは2番目のハンドラーになります。レイアウトを変更する必要がある場合でも、しきい値の幅（600px？）が必要になります。

お役に立てれば。

于 2012-05-24T22:56:12.990 に答える
0

私が得られないのは、if ($(window).width() > 600) return;高解像度のデバイスをターゲットにしたくないということですか？

私は間違っているかもしれませんが、支払いとほとんどの最新のandroidとiphone（>HVGAとIphoneretina）の場合、このイベント処理機能を終了しませんか？

于 2012-05-25T14:09:53.387 に答える
0

上に貼り付けたHTMLがめちゃくちゃになっています。閉じられていない強力なタグがあります。おそらく、強力なタグを付けるべきではありません。持っている場合は、外部ではなく、divの内部に配置してください。あなたはtrでスパンに包まれています。これは構文的に非常に正しくありません。信頼性の高いレンダリングが行われないことにまったく驚いていません。スパンはデフォルトでインラインであり、次にtrをインライン要素の内側に配置します。これがどのようにレンダリングされると思いますか？可能であれば、trとtdを完全に削除し、代わりにfloatdivを使用してみてください。どうしてもテーブルを使用する必要がある場合は、テーブルを正しく作成してください。マークアップを単純化してみてください。マークアップが複雑になるほど、エラーの余地が大きくなります。複数のマークアップエラーがある場合、ブラウザが異なれば、不十分なマークアップをさまざまな方法で処理する可能性があります。そこの' ■td（ブロック）内のスパン（インライン）内のストロング（デフォルトではインライン）内にdiv（デフォルトでブロック）を含める理由はありません。マークアップを単純化してクリーンアップすれば、問題はなくなると思います。幸運を。

于 2012-05-27T03:39:20.630 に答える