ブラウザのウィンドウ高さの取得方法と動作デモ。
スマホブラウザ固有のメニューバーの高さが縦スクロールで変化することでブラウザのウィンドウ高さも変動するので、要素を全画面表示したい場合などでJavaScriptのどのプロパティーを参照してwindowの高さを取得すれば良いか忘れるのでメモ。
※ WindowインターフェイスについてのMozillaの公式ドキュメント。
[ 動作デモ ]
実機チェック用の「動作デモページ」。
※ 実機で実測値をチェックしたかったので、「load」、「scroll」、「resize」イベントが発生したら、ネイティブJavaScriptとjQueryの両方で取得したブラウザのウィンドウ高さの実測値を表示する動作確認のデモページ。
ネイティヴJavaScriptで取得する場合
ライブラリーを使わずにネイティブJavaScript(Vanilla JavaScript)だけで取得する場合は、高さの情報を保持するプロパティーの値を参照する。
- [ 現在の状態での表示領域の高さをリアルタイムで取得 ]
window.innerHeight
※ スマホブラウザのメニューバーの高さの変動に合わせて、そのときのコンテンツ表示領域の高さを返す。 - [ 表示領域が最大状態のときの高さを常に取得 ]
window.outerHeight
※ スマホでは常にコンテンツ表示領域が最大(ブラウザのメニューバーが最小)状態のときの表示領域の高さを返す。(PCの場合は、ブラウザのUI部分も含めた高さが返されてしまうので実用性は不明。)
※ iPhone(iOS16.3)のSafari, Chromeで確認すると、コンテンツ表示領域の高さではなくデバイスのスクリーンサイズと同じ値が常に返されているので、コンテンツ表示領域の最大状態のときの高さを常に取得する方法は無さそう。(Androidは未確認。) - [ 表示領域が最小状態のときの高さを常に取得 ]
<html>要素.clientHeight
※ スマホでは常にコンテンツ表示領域が最小(ブラウザのメニューバーが最大)状態のときの表示領域の高さを返す。
※ PCの場合、メニューバーは変動しないので「window.innerHeight」と同じ値になるはずだが、小数点の扱いに起因するのかブラウザの仕様の影響で値が異なることがある。(Firefox バージョン128.0.3では2つの値に「1px」の差があるが、Chrome バージョン127.0.6533.73では誤差無く同じ値が返る。)
※ 基本的に、「現在の状態でのコンテンツ表示領域の高さ」を返す「window.innerHeight」か、常に「最小状態のときのコンテンツ表示領域の高さ」を返す「document.documentElement.clientHeight」を状況に合わせて使い分ける。(HTML文書の場合、「document.documentElement」は「document」のルート要素である<html>要素を返す。)
1. windowオブジェクトのinnerHeightプロパティー
window.innerHeight : ウィンドウの「layout viewport」の高さをピクセル単位の整数で返す。水平方向のスクロールバーが表示されていれば、スクロールバーの高さを含めた値を返す。
※ 「layout viewport」とは、ブラウザが描き出したWebページの、見えている領域を意味するviewport。
※ 「innerHeight」は、「window」オブジェクト以外にも、ウィンドウのように動作するオブジェクト(タブやフレームなど)の高さを取得することもできる。
※ 水平方向のスクロールバーや境界を引いた高さの取得には<html>要素が持つ「clientHeight」プロパティーを参照する。(後述。)
let windowHeight = window.innerHeight;
2. windowオブジェクトのouterHeightプロパティー
window.outerHeight : ブラウザのUI操作部分、ウィンドウをリサイズする境界やハンドルを含む、ブラウザウィンドウ全体の高さをピクセル単位の整数で返す。
let windowHeight = window.outerHeight;
3. <html>要素のclientHeightプロパティー
要素.clientHeight : 指定した要素の内側の寸法(paddingを含めるがborder、margin、スクロールバーは含めない)をピクセル単位の整数で返す。「document」のルート要素(<html>要素)を指定した場合は、スクロールバーを除いた「layout viewport」の高さを返す。
※ HTML文書の場合、「document.documentElement」は「document」のルート要素である<html>要素を返す。
let windowHeight = document.documentElement.clientHeight;
4. screenオブジェクトのheightプロパティー
window.screen.height : デバイスの画面の高さをピクセル単位の整数で返す。
※ 「screen」オブジェクトはScreenインターフェイスを実装していて、現在のウィンドウが描画されている画面を表す。
※ 「screen」オブジェクトは「window」オブジェクトの「screen」プロパティーで参照できる。(Webブラウザ上で「window」オブジェクトはグローバルオブジェクトなので、「window.」は省略できる。)
let screenHeight = screen.height;
5. screenオブジェクトのavailHeightプロパティー
window.screen.availHeight : デバイスの画面上で、ブラウザがWebコンテンツに利用することが可能な領域の高さをピクセル単位の整数で返す。
※ デバイスの画面上でブラウザウィンドウを最大化したとき、Webコンテンツとして利用できる領域の高さの上限値。
※ macOS(バージョン 11.7.10)ではブラウザウィンドウ(Firefox ,Chrome)を最大化したときの「window.outerHeight」と同じ値が返るが、iOS(バージョン 17.5.1)ではブラウザウィンドウ(Safari)の「window.outerHeight」よりも大きい値(おそらくブラウザの固有バー部分も含まれた画面全体の値)が返る。(他のOSでは未確認。)
let screenHeight = screen.availHeight;
jQueryで取得する場合
jQueryの場合は、要素の高さを取得するメソッドを利用する。
ブラウザのウィンドウ高さを取得する場合は「window」オブジェクトを指定するので、「height()」と「innerHeight()」、「outerHeight()」と「outerHeight(true)」はそれぞれ同じ値になる。
- height()とinnerHeight() : スマホでブラウザ固有のメニューバーのリサイズでも変動せず、常に最小のときの表示領域の高さを返す。
- outerHeight()とouterHeight(true) : スマホでブラウザ固有のメニューバーのリサイズで変動する表示領域の高さを返す。
1. height()メソッド
要素.height() : 指定した要素の高さを返す。
let windowHeight = $(window).height();
2. innerHeight()メソッド
要素.innerHeight() : 指定した要素のpaddingを含めた高さを返す。(borderとmarginは含めない。)
let windowHeight = $(window).innerHeight();
3. outerHeight()メソッド
要素.outerHeight() : 指指定した要素のpaddingとborderを含めた高さを返す。(marginは含めない。)
let windowHeight = $(window).outerHeight();
4. outerHeight(true)メソッド
要素.outerHeight(true) : 指定した要素のpaddingとborderとmarginを含めた高さを返す。
let windowHeight = $(window).outerHeight(true);
https://memo.ag2works.tokyo/post-3859/
ブラウザのウィンドウ高さの取得方法と動作デモ。 | memo メモ [AG2WORKS]
<a href="https://memo.ag2works.tokyo/post-3859/" target="_blank" rel="noopener">ブラウザのウィンドウ高さの取得方法と動作デモ。 | memo メモ [AG2WORKS]</a>
この記事へのコメント
コメントの書き込みはまだありません。