WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い

レスポンシブサイトではウィンドウの幅(画面解像度)によって
レイアウトの調整や動作処理の制御を行います。

ウィンドウサイズ(画面幅/高さ)の取得方法に関しては
スクリプト制御ではjQueryの「.width()」メソッドのほか、
JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、
CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法で
ウィンドウサイズを取得することが可能になります。

それぞれの取得する方法によってすこし厄介なのは、
ページ内にスクロールバーがある時とない時で
取得する値が変わってくるというもの。

さまざまな場面でウィンドウサイズを取得する機会が増えてきているので
上記のそれぞれ取得方法について比較してみました。

ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い

まずは各スクリプト処理とCSSメディアクエリを同時に使って
それぞれウィンドウサイズ取得の値を確認するサンプル画面から。

サンプル画面を開いてウィンドウサイズを伸縮して
縦横のそれぞれスクロールバーが出る状態にしたり出ない状態にしたりしてみてください。

「画面サイズを取得する際のjQueryやJavaScriptとCSSメディアクエリの違い」比較画面を別枠で表示

各スクリプト処理で取得したウィンドウサイズ値が画面のテーブルに表示されます。
※幅だけでなく高さ「height」の値も併せて表示しています。

取得する処理は
・「.width()」メソッド(jQuery)
・「.innerWidth」メソッド(JavaScript)
・「.matchMedia」メソッド(JavaScript)
・「@media only screen and (max-width:○○px)」(CSSメディアクエリ)
の4種類になります。

「.matchMedia」メソッドの処理では
ウィンドウの幅と高さがそれぞれ600px以上の場合はメッセージが「↑」、
600px以下の場合はメッセージが「↓」に変化します。

CSSメディアクエリの処理では
幅の処理については、
ウィンドウ幅が600px以上の場合は背景色は白、
ウィンドウ幅が600px以下になった場合に背景色を赤に変化します。
高さの処理については、
ウィンドウ高さが600px以上の場合は表中のフォント色は黒、
ウィンドウ高さが600px以下になった場合に表中のフォントが青になります。

サンプル画面の動作をもとに
それぞれの方法でウィンドウサイズを取得した場合に
スクロールバーを含んだ値で取得するか
スクロールバーを含まない値で取得するかの違いについて・・・

$(window).width()

jQuery「.width()」メソッドで取得するウィンドウサイズは
スクロールバーを含まない値で取得します。

[javascript]
◆SCRIPT
var windowWidth = $(window).width();
[/javascript]

jQueryでは幅の値を取得する際に
枠の内側や外側を含んだり含まなかったりさせることができる
「.innerWidth()」「.outerWidth()」の各メソッドがありますが
これらは「$(window)」と「$(document)」に対しては適用されないので
ウィンドウサイズを取得する際には影響がありません。

window.innerWidth

JavaScriptの「window.innerWidth」メソッドで取得するウィンドウサイズは
スクロールバーを含んだ値で画面サイズを取得します。

[javascript]
◆SCRIPT
var windowWidth = window.innerWidth;
[/javascript]

IE8以下は、非対応となっていて「undefined」を返します。
「window.outerWidth」もありますが、
ブラウザウィンドウの枠全体(ウィンドウ枠のデザイン含む)の幅を取得します。

window.matchMedia

JavaScriptの「.matchMedia」メソッドで取得(比較)するウィンドウサイズは
スクロールバーを含んだ値で画面サイズを取得(比較)します。

[javascript]
◆SCRIPT
if(window.matchMedia(‘(min-width:○○px)’).matches){
~ ここに条件がマッチした場合の処理を記述 ~
} else {
~ ここに条件がマッチしなかった場合の処理を記述 ~
}
[/javascript]

JavaScriptの「.matchMedia」を使うと、
CSSメディアクエリと同じ感覚で画面サイズを取得・比較することができます。

IE9以下は非対応の為、機能しません。

CSSメディアクエリ

CSSメディアクエリで取得するウィンドウサイズは
スクロールバーを含んだ値で画面サイズを取得します。

[css]
◆CSS
@media only screen and (min-width: ○○px) {
~ ここに ○○px 以上の時の指定を記述 ~
}

@media only screen and (max-width: ○○px) {
~ ここに ○○px 以下の時の指定を記述 ~
}
[/css]

上記をふまえてブラウザのウィンドウサイズを取得する際の
スクロールバーを含んだ値で取得するか
スクロールバーを含まない値で取得するかの違いについて
取得範囲のイメージは以下の図のようになるかと思います。

スクリプト処理とCSSメディアクエリを同時に使う場合には
対象となるブラウザの問題をふまえて、スクロールバーの値も合わせて取得する必要があるので
「window.innerWidth」や「window.matchMedia」を使うことで
スクロールバーの有無に影響されずに処理することができるかと思います。

スクリプト処理とCSSメディアクエリを同時に使って
ウィンドウサイズの処理動作をする際のご参考までに。。。

ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い」への4件のフィードバック

  • 2015年12月16日 @ 11:48 AM
    パーマリンク

    いつも興味深い記事掲載ありがとうございます。
    私もレスポンシブのHTMLをコーディングする機会が増え、ブラウザごとの横幅の解釈の違いはいつも悩むポイントでした。
    個人的にはCSSのメディアクエリで表示コントロールをし、動的な箇所については(センスのない手法かもしれませんが…)ハンバーガーメニューなどPCでは表示しない要素のdisplayがblockかnoneかでデバイス判別をするようにしています。

    返信
  • 2015年12月18日 @ 1:42 AM
    パーマリンク

    >豆芝さん
    コメントありがとうございます。

    自分も切り替えがどうしようもない時は
    そのように「display:block;」と「display:none;」で
    表示/非表示をを切り替えてしまうことはありますが
    やはりあまり美しいやり方ではないので
    できるだけ避けたい方法ではありますよね…

    レスポンシブでのメニュー関連ではとくによく悩みます。。

    返信
  • 2016年6月20日 @ 3:42 PM
    パーマリンク

    いつもありがとうございます!
    しばらく、WEBの仕事からは遠ざかっていました。なので、「必要に迫られた真面目な検索」により、貴サイトにアクセスしたのは本当に何年かぶりです。
    デザインが洗練されましたね!初めて拝見させていただいた時は、もっと黒かったような印象があります。
    でも、コンセプトは変わっておられないようですね!わたしにとっては、うれしいことです。
    検証が緻密で、解説は誤解が生じないように、あまり知識が無い人でも一目でわかるように工夫しておられる。
    解説文を読んだり、添付されている画像を拝見すると、技術が進んでいっても役立つ内容を心がけておられるところがいいです。

    「これが新技術!だからスゴイ!乗り遅れるな!」「これがトレンディ!だから使わなきゃ!乗り遅れるよ!」とか。
    そういう風潮にお付き合いしつつも、振り回されるのではなく、冷静に受け止め、そして、「そういう時は、こうしたらいいんだよ」と、同じ目にあっている人々に教えてくださる。本当にお世話になっています。

    今回も、早速、このページで教えていただいたことを試してみました。
    思い通りにいきました。
    これからも、「オープンソース」でいてくだされませ。
    Vielen Dank !

    返信
  • 2016年6月20日 @ 7:52 PM
    パーマリンク

    >りおっちさん
    コメントありがとうございます。

    当ブログを公開直後からご覧頂いていたとのこと
    大変光栄に思っております。

    自分がWeb制作においてつまづいた点や
    よく必要に駆られる内容をまとめているものもありますので
    そのような同じ状況においてお役立ていただいたという
    お言葉を聞けるだけで本当にうれしく思います。

    ブログ全体から記事の内容まで
    そのようにご評価いただき
    本当にありがとうございます。

    いただいたお言葉を励みにして
    今後もより一層Web制作において役に立つ情報を発信し続けられるように
    精進させていただきます。

    引き続きご贔屓いただけると幸いです。
    今後ともよろしくお願い致します。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です