JavaScriptやjQueryを使ったWebサイトやアプリケーションを作っていると画面のピクセル数を取得しなければならない時があります。
特にスマートフォンやタブレット向けのサイト/アプリだと多いです。
で、個人的に頭の中を整理したいのもあって、確認してみました。
それをまとめてみます。
確認用のページと結果
確認用スクリプトを作ったので、まずはそれをご紹介します。
以下です。
JaveScript&jQuery Window Width/Height
画面上部の「Get Width/Height」ボタンを押すと、windowオブジェクトの幅と高さのピクセル数を取得して表示します。
私自身はPCのChrome、Edge、Firefox、Opera、Safariで実験をしましたが、その結果の対応環境をアイコンで表示しています。
結果、対応環境はどれも同じでした。
値については「window.outerHeight」のみ異なる値になります。
「window.outerHeight」についてはブラウザのツールバーなどをすべて含めた値になるからだそうです。
詳細は未確認。
基本的にはjQueryで良さそう
普通のサイトやアプリであれば、ツールバー部分の高さは必要ないことの方が多いので、「window.outerHeight」はあまり使うことは無さそうな気がします。
またJavaScriptの「window.inner~」、jQueryの「inner~()」「outer~()」は全く同じ値になります。
なので、windowオブジェクトについてのみで言えば、基本的にはjQueryの「width()」「height()」などを使えば良いと思われます。
ただ、ごく最近の製作で実際にあった話なのですが、iOS9の場合上記の動作が少し変化するようです。
なので、分岐する必要があるかもしれません。
それについては詳細がわかり次第書きたいと思います。
次はdocument
スマートフォンについての結果は省きましたが、PC用とほぼ同じです。
あと、今回は画面のピクセル数だけですが、documentオブジェクトのピクセル数についても気になってきました。
というわけで、現在documentオブジェクトも調査中です。
次回はそれについて書きます。
