【Javascript】ブラウザの表示領域サイズ取得について

プログラミング

最終更新: 2018年8月2日

目次
  1. 結論
  2. 実験
  3. 実験結果一覧表
  4. 古いブラウザでの実験結果

結論

以下のように求められます。
※ IE6, 7, 8は対象外です。

1. 表示領域の幅 (スクロールバー含まず) =
  document.documentElement.clientWidth;
  $(window).width(); // jQuery

2. 表示領域の高さ (スクロールバー含まず) =
  document.documentElement.clientHeight;
  $(window).height(); // jQuery

3. 表示領域左上のX座標 (文書左端から表示領域左端までの距離) =
  window.pageXOffset;
  window.scrollX; // pageXOffsetと同等(エイリアス)
  $(window).scrollLeft(); // jQuery

4. 表示領域左上のY座標 (文書上端から表示領域上端までの距離) =
  window.pageYOffset;
  window.scrollY; // pageYOffsetと同等(エイリアス)
  $(window).scrollTop(); // jQuery


実験


実験結果一覧表

  • Windows10で検証。
  • IE9とIE10の結果は、IE11でエミュレートしたものです。

【適切に表示領域の幅を取得できるか？】
IE
9, 10, 11		 EdgeHTML
17		 Firefox
61		 Chrome
68

document
.documentElement
.clientWidth
(スクロールバー含まず)
 OK OK OK OK

document
.body
.clientWidth
 注1 注1 注1 注1

window
.innerWidth
(スクロールバー含む)
 OK OK OK OK

$(window).width()
(スクロールバー含まず)
 OK OK OK OK
$(document).width() 注2 注2 注2 注2
※注1: 常に<body>の幅。
※注2: ブラウザとbodyの幅を比べて広い方の値。

ブラウザの幅のほうが広い場合、IE9とIE10では、スクロールバーを含めた値となる。



【適切に表示領域の高さを取得できるか？】
IE
9, 10, 11		 EdgeHTML
17		 Firefox
61		 Chrome
68

document
.documentElement
.clientHeight
(スクロールバー含まず)
 OK OK OK OK
document
.body
.clientHeight		 注1 注1 注1 注1

window
.innerHeight
(スクロールバー含む)
 OK OK OK OK

$(window).height()
(スクロールバー含まず)
 OK OK OK OK
$(document).height() 注2 注2 注2 注2
※注1: 常に<body>の高さ。
※注2: 常にページ全体の高さを表す。


【適切に、文書左端から表示領域左端までの距離を取得できるか?】
IE
9, 10, 11		 EdgeHTML
17		 Firefox
61		 Chrome
68

document
.documentElement
.scrollLeft
 OK 常に0 OK OK
document
.body
.scrollLeft		 常に0 OK 常に0 常に0


window
.pageXOffset

 OK OK OK OK

$(window).scrollLeft()
 OK OK OK OK
$(document).scrollLeft() OK OK OK OK



【適切に、文書上端から表示領域上端までの距離を取得できるか？】
IE
9, 10, 11		 EdgeHTML
17		 Firefox
61		 Chrome
68
document
.documentElement
.scrollTop		 OK 常に0 OK OK
document
.body
.scrollTop		 常に0 OK 常に0 常に0


window
.pageYOffset

 OK OK OK OK
$(window).scrollTop() OK OK OK OK
$(document).scrollTop() OK OK OK OK


古いブラウザでの実験結果

IE6, 7, 8もサポート対象に含める場合は下記のようになります。
3番、4番が少し複雑になっています。
1.x系のjQueryを使えば楽です。

1. 表示領域の幅 (スクロールバー含まず)   =
  document.documentElement.clientWidth;

2. 表示領域の高さ (スクロールバー含まず) =
  document.documentElement.clientHeight;

3. 表示領域左上のX座標 (文書左端から表示領域左端までの距離) =
  (document.documentElement.scrollLeft > 0) ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft;

4. 表示領域左上のY座標 (文書上端から表示領域上端までの距離) =
  (document.documentElement.scrollTop > 0) ?
    document.documentElement.scrollTop :
    document.body.scrollTop;

(WindowsXP, WindowsVistaで検証)

【適切に表示領域の幅を取得できるか？】
IE
6, 7, 8		 Opera
12.16		 Safari
5.1.7
document
.documentElement
.clientWidth
(スクロールバー含まず)		 OK OK OK
document
.body
.clientWidth		 注1 注1 注1
window
.innerWidth
(スクロールバー含む)		 x OK OK
※注1 : ブラウザの表示領域の幅がbodyタグの幅より広い場合はブラウザの幅を、
bodyタグのほうが広い場合はbodyタグの幅を取得。



【適切に表示領域の高さを取得できるか？】
IE
6, 7, 8		 Opera
12.16		 Safari
5.1.7
document
.documentElement
.clientHeight
(スクロールバー含まず)		 OK OK OK
document
.body
.clientHeight		 注1 注1 注1
window
.innerHeight
(スクロールバー含む)		 x OK OK
※注1 : ブラウザの表示領域の高さがbodyタグの高さより高い場合はブラウザの高さを、
bodyタグのほうが高い場合はbodyタグの高さを取得。



【適切に、文書左端から表示領域左端までの距離を取得できるか?】
IE
6, 7, 8		 Opera
12.16		 Safari
5.1.7
document
.documentElement
.scrollLeft		 OK OK 常に0
document
.body
.scrollLeft		 常に0 常に0 OK
window
.pageXOffset		 x OK OK



【適切に、文書上端から表示領域上端までの距離を取得できるか？】
IE
6, 7, 8		 Opera
12.16		 Safari
5.1.7
document
.documentElement
.scrollTop		 OK OK 常に0
document
.body
.scrollTop		 常に0 常に0 OK
window
.pageYOffset		 x OK OK