Hatena::ブログ(Diary)

すたら日記

2009年02月20日

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

最終更新: 2017年3月31日

目次

  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).scrollLeft(); // jQuery

4. 表示領域左上のY座標 (文書上端から表示領域上端までの距離) =
  window.pageYOffset;
  $(window).scrollTop(); // jQuery

f:id:sutara_lumpur:20120616151411p:image


実験

リンク先の緑色の『Run』ボタンをクリックすると実行します。


実験結果一覧表

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

【適切に表示領域の幅を取得できるか?】
IE
9, 11
EdgeHTML
14
Firefox
52
Chrome
57
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のみ、スクロールバーを含めた値となる。



【適切に表示領域の高さを取得できるか?】
IE
9, 11
EdgeHTML
14
Firefox
52
Chrome
57
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, 11
EdgeHTML
14
Firefox
52
Chrome
57
document.
documentElement.
scrollLeft
OK 常に0 OK 常に0
document.
body.
scrollLeft
常に0 OK 常に0 OK
window.
pageXOffset
OK OK OK OK
$(window).scrollLeft() OK OK OK OK
$(document).scrollLeft() OK OK OK OK



【適切に、文書上端から表示領域上端までの距離を取得できるか?】
IE
9, 11
EdgeHTML
14
Firefox
52
Chrome
57
document.
documentElement.
scrollTop
OK 常に0 OK 常に0
document.
body.
scrollTop
常に0 OK 常に0 OK
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

onozatyonozaty 2009/02/21 01:38 いえいえー。
見にきたら消えていたので、なんだったのかなぁと、気にはなっていました^^;;

sutara_lumpursutara_lumpur 2009/02/21 18:18 onozatyさん、はじめまして。
さぞや気味悪く思われたことでしょう(w

sutara_lumpursutara_lumpur 2009/02/21 18:24 ひとこと告げておけばよかったんですよね。
『関連する記事を書きましたが間違いに気づいたので
いったん削除しました』と…。

通りすがり通りすがり 2010/09/04 17:31 とても分かりやすかったです。
ありがとう。

sutara_lumpursutara_lumpur 2010/09/04 17:39 いえいえ。お役に立ったなら嬉しいです(^ ^)

hanzManhanzMan 2012/11/27 13:40 おかげさまで一挙に思い通りの動作を得ることが出来ました。本当に助かりました。アリガトウございます。(ペコリ)

sutara_lumpursutara_lumpur 2012/11/27 14:00 お役に立てて何よりです (*´∀`*) ホッ

tetsutetsu 2013/04/20 14:41 この「すたら日記」にはほんといつも助けられる。
とてもわかりやすいです。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。