[JavaScript] ブラウザのサイズを取得する

投稿日：2016年10月8日更新日：2018年5月3日

表示中のブラウザのサイズを取得するには、
window.outerWidth / window.outerHeightまたは
window.innerWidth / window.innerHeightを使用します。

サンプル

ブラウザのサイズには枠やメニューバーなどを含んだ全体のサイズと、枠やメニューバーを含まないウェブページの表示領域のサイズがあり、それぞれ取得することができます。

//ブラウザ全体の横幅と縦幅を取得する
var ow = window.outerWidth;
var oh = window.outerHeight;

//ブラウザ表示領域の横幅と縦幅を取得する
var iw = window.innerWidth;
var ih = window.innerHeight;

//ブラウザ全体の横幅と縦幅を取得する

var ow = window.outerWidth;

var oh = window.outerHeight;

//ブラウザ表示領域の横幅と縦幅を取得する

var iw = window.innerWidth;

var ih = window.innerHeight;

実行サンプル

↓お使いのウィンドウサイズを表示しています。

横幅（ブラウザ全体）：1280px
横幅（ブラウザ表示領域）：1280px
縦幅（ブラウザ全体）：720px
縦幅（ブラウザ表示領域）：720px

※値を更新したい場合は「再表示」ボタンを押してリロードしてください。

解説

「window.」は省略可能です。　例）window.outerWidth → outerWidth
ディスプレイのサイズを取得したい場合は「ディスプレイのサイズを取得する」をご覧ください。

執筆者：とら