0

私は次のことを達成しようとしています：私が取り組んでいるウェブサイトはランドスケープモードでよりうまく機能します。デバイスがポートレートの場合はメッセージが表示され、ランドスケープの場合はメッセージが表示されないようにします。

私はready（）関数の中に次のコードを書きました：

    $(window).resize( function(){

    var height = $(window).height();
    var width = $(window).width(); 

    if(width>height) {
        // Landscape
        $("#landscape").css('display','none');
    }   
    else {
        // Portrait
        $("#landscape").css('display','block');
        $("#landscape").click(function(){
            $(this).hide();
        });
    }

ただし、ページが読み込まれる（または更新される）と、常にメッセージが表示されます（ポートレートモードでのみ表示されるはずです）。次にブラウザのサイズを変更すると、コードが機能し始め、それに応じてメッセージを表示/非表示にします。どうすればこれを修正できますか？

ありがとう！

4

3 に答える 3

2

.resize()後に電話する$(window).resize()：

$(window).resize( function(){

  var height = $(window).height();
  var width = $(window).width(); 

  if(width>height) {
    // Landscape
    $("#landscape").css('display','none');
  } else {
    // Portrait
    $("#landscape").css('display','block');
    $("#landscape").click(function(){
        $(this).hide();
    });
  }
}).resize(); // <----this way
于 2013-03-06T17:55:45.270 に答える
0

DOMの準備ができたら関数をトリガーします。

$(function() {
    $(window).resize();
});
于 2013-03-06T17:47:52.077 に答える
0

ready（）関数は、ロード時に1回だけ起動します。これをready関数の外に出して、ロード時に1回呼び出すだけで、ウィンドウのサイズが変更されている場合は機能する必要があります。

また、$（window）.resizeを使用する場合は、複数の同時発生を防ぐために時間遅延を設定してください。これは何度も取り上げられています。

JavaScript / JQuery：$（window）.resizeサイズ変更が完了した後に起動する方法は？

jQuery-「サイズ変更」イベントの「終了」を待ってからアクションを実行する方法は？

プロジェクトの範囲がわからない場合でも、方向性のみに基づいてプロジェクトを処理することは、通常、悪い習慣と見なされます。特にランドスケープ関数（幅>高さ）で。ページ幅が幅1280、高さ500の場合はどうなりますか？デバイス検出も使用していない限り、ロジックが常に当てはまるとは限りません。

于 2013-03-06T17:58:20.050 に答える