javascript - レスポンシブ Web デザインのブラウザー幅をリッスンしますか?

Question

サイトをモバイル フレンドリーにしようとしています。

ブラウザー ウィンドウのサイズを知りたいので、728px よりも狭い場合は何かを行い、728px より大きい場合は別のことを行います。

これには、PC でのウィンドウのサイズ変更と、電話での縦向きモードから横向きモードへの変更を考慮する必要があります。

これはどのように行うことができますか？

Answer 1

m90が示唆しているように、スタイルを変更することだけが必要な場合は、メディアクエリを確認する必要があります。ただし、スタイルを変更するだけでは不十分な場合は、JavaScriptに依存する必要があります。

プレーンJavaScript

問題は、ウィンドウの幅を取得するのは完全に簡単ではなく、ブラウザによって異なることです。したがって、次のような関数を作成する必要があります（テストされていません）：

var width = 0;
function updateWindowSize() {
    if (document.body && document.body.offsetWidth) {
      width = document.body.offsetWidth;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetWidth ) {
       width = document.documentElement.offsetWidth;
    }
    if (window.innerWidth) {
       width = window.innerWidth;
    }
}

次に、window onresizeイベントをリッスンし、関数を呼び出して、ウィンドウが変更されるたびに新しいウィンドウサイズを取得できます。

window.onresize = function(event) {
    updateWindowSize();
}

jQuery

jQueryを使用する場合は、jQueryがバックグラウンドでクロスブラウザーのサポートを処理するため、これを少し短くすることができます。

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