21

ユーザーがウィンドウのサイズを変更した後にブラウザの幅と高さを取得する方法はありますか? たとえば、ウィンドウが 1920 x 1080 で、ユーザーがウィンドウを 500 x 500 に変更した場合、JavaScript または jquery でこれら 2 つの新しい値を取得する方法はありますか?

4

9 に答える 9

6

レイアウトの調整を行うためにこれらの値を知る必要がある場合は、それらの値を聞く予定があるに違いありません。Window.matchmedia()代わりに、その目的のために API を使用することをお勧めします。

これははるかにパフォーマンスが高く、基本的に CSS メディア クエリに相当する JS です。

非常に簡単な使用例:

if (window.matchMedia("(max-width: 500px)").matches) {
  /* the viewport is less than or exactly 500 pixels wide */
} else {
  /* the viewport is more than 500 pixels wide */
}

matchesプロパティの状態が変化するたびに呼び出されるリスナーをセットアップすることもできます。

リスナーの説明と使用例については、 MDN を参照してください。

于 2018-03-07T13:41:49.590 に答える
5

resizeイベントをリッスンすることで可能です。

$(window).resize(function() {
  var width = $(window).width();
  var height = $(window).height();
})
于 2013-04-05T17:54:31.973 に答える
5

JQuery の resize() 関数を使用できます。また、リロード イベントに同じサイズ変更ロジックを追加してください。ユーザーがサイズ変更されたウィンドウでリロードすると、ロジックは機能しません。

 $(window).resize(function() {
                        $windowWidth = $(window).width();
                            $windowHeight = $(window).height();
                        });

 $(document).ready(function() {
      //same logic that you use in the resize...
  });
于 2013-04-05T17:56:46.890 に答える
1

jQuery resize メソッドを使用して、ウィンドウ サイズの変更をリッスンします。コールバック内で高さと幅を取得できます。

$(window).resize(function(){
    var width = $(window).width();
    var height = $(window).height();

});
于 2013-04-05T17:54:32.240 に答える
1

プロパティとresize一緒にイベントを使用できます。height()width()

$(window).resize(function(){
   var height = $(window).height();
   var width = $(window).width();
});

ここでさらにいくつかの例を参照してください

于 2013-04-05T17:54:39.973 に答える