【WordPress対応】JavaScriptで画面サイズを取得する方法【jQuery】

更新日：2021年9月15日

「ファーストビューの中に画像をきっちりはめ込みたいけどブラウザや解像度によって画像サイズを調整する必要がある」
「画像サイズは良いけどブロック要素の高さを静的に指定したくない」

そのようなことでお困りですか？

この記事ではJavaScript（jQuery）を使用し、画面サイズを取得する方法を紹介します。 WordPressにインストールされているjQueryを対象としているためWordPressでもそのまま実装することが出来ます。

1 JavaScriptで画面サイズを取得する方法
2 高さの要素を取得するJavaScriptの実装
3 使用方法

JavaScriptで画面サイズを取得する方法

上記の画像のように、ブラウザで表示されている表示領域のサイズが取得したいということです。

ブラウザが最大化されていない場合やスマフォ画面であっても、同様にブラウザの表示領域が取得できることで、レスポンシブ対応の際、画面に収める高さの計算が容易になります。

それでは早速実装方法を見ていきましょう。

高さの要素を取得するJavaScriptの実装

jQueryを使用して実装しています。

WordPressに標準でインストールされているjQueryは$記号が使えませんので $の部分をjQueryと置き換えて実装する必要があります。

理由については別記事にて解説したいと思います。

以下がコードになります。

/** ブラウザ表示領域のサイズを取得します. */
function getBrowserDispAreaSize() {
    return jQuery(window).height();
}

以上です。

jQuery(window).height();

この部分でブラウザの表示領域の縦幅を取得しています。

使用方法

実際に使用する際のコーディング例を記載します。

以下のようなHTML要素があるとします。

&amp;amp;lt;div id="topBlock"&amp;amp;gt;
&amp;amp;lt;!-- このdivブロックの高さはブラウザの表示領域の高さと同じになります。--&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;

そして以下のJavaScriptのコードをフッターなど後半に読み込まれるところに貼り付けます。

WordPressだと便利な関数が用意されていますのでそちらで読み込むほうが安全です。

別記事にて解説しています。

&amp;amp;lt;script type="text/javascript"&amp;amp;gt;
/** ブラウザ表示領域のサイズを取得します. */
function getBrowserDispAreaSize() {
    return jQuery(window).height();
}

jQuery(window).load(function () {
    jQuery('#topBlock').height(getBrowserDispAreaSize());
});

以上です。