web-dev-qa-db-ja.com

Webブラウザウィンドウの幅の変更を自動的に検出しますか？

$（window）.width（）を使用すると、Webブラウザーのサイズを取得できることを知っています。

列幅を再調整できるように、ユーザーがWebブラウザーのサイズを変更したことを検出したいと思います。これを自動的に検出する方法はありますか、それともsetTimeintervalを使用してループし、変更されたかどうかを確認する必要がありますか？

javascriptjquerybrowserwindowdetect
26
ajsie

resize event を試してください

$(window).resize(function() {
  console.log('window was resized');
});
41
PetersenDidIt

JavaScriptイベントの名前は_window.onresize_です。

JQueryバインディングの名前は .resize() です

20
Pekka 웃

これを書き留めると、これらの答えのいずれも、これを行うための最新のベストプラクティスの方法を提供しません。

window.addEventListener("resize", function(event) {
    console.log(document.body.clientWidth + ' wide by ' + document.body.clientHeight+' high');
})
12
B T

[〜＃〜] mdn [〜＃〜] では、非常に優れたJavascriptスタンドアロンコードを提供します。

window.onresize = resize;

function resize()
{
 alert("resize event detected!");
}

この種の機能だけが必要な場合は、ぜひお試しください。

5
jasmo2

IEで覚えておくべきこと、少なくとも、サイズ変更イベントはバブルし、配置された要素とドキュメント本文は、独立したサイズ変更イベントを起動できます。

また、IEは、ウィンドウまたは要素がドラッグによってサイズ変更されると、「サイズ変更」イベントの連続ストリームを起動します。他のブラウザは、マウスアップが起動するのを待ちます。

IEは十分に大きなプレーヤーであり、IEクライアントのみに分岐する場合でも、フィールドのサイズ変更イベントの中間ハンドラーがあると便利です。

Ieハンドラーは、「実際の」サイズ変更ハンドラーを呼び出す前に、短いタイムアウト（100〜200ミリ秒）を設定します。タイムアウト前に同じ関数が再度呼び出された場合、それはbubblngイベントであるか、ウィンドウが新しいサイズにドラッグされているため、タイムアウトをクリアして、もう一度設定します。

3
kennebec

debounceを使用することができます： https://davidwalsh.name/javascript-debounce-function

それ以外の場合

window.addEventListener("resize")

ウィンドウのサイズ変更が進行している間、ずっと発生します。これはCPUオーバーヘッドに負担をかけます。

1
Luke Dohner

これは、私が同じことのためにまとめた小さなコードです。

(function () {
    var width = window.innerWidth;

    window.addEventListener('resize', function () {
       if (window.innerWidth !== width) {
           window.location.reload(true);
       }
    });
})();
1
Anshul Sanghi

Media = "only screen and（min-width：750px）" href = "... css file for wide windows" media = "only screen and（max-width：751px）" href = "... css file携帯用」

右側のウィンドウの境界線を左右に移動してウィンドウサイズを増減すると、Webブラウザーがワイドウィンドウからモバイルに自動的に切り替わります。ウィンドウの幅を検出するためにJavaScriptコードを含める必要はありません。これは、WindowsコンピュータとMacintoshコンピュータの両方のChrome、Firefox、およびInternet Explorerで機能します。

1
Jacob Palme