ブログトップ 記事一覧 ログイン 無料ブログ開設

Enjoy*Study このページをアンテナに追加 RSSフィード

2006-08-02

[][]ブラウザの表示領域のサイズを取得する方法。

ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。


IEFireFoxOperaSafariにて、表示モード毎に参照すべきプロパティをまとめてみました。(Safariについては2007/05/20に追記)

調査したのは、下記のプロパティです。

  • window.innerWidth
  • window.innerHeight
  • document.body.scrollWidth
  • document.body.scrollHeight
  • document.body.offsetWidth
  • document.body.offsetHeight
  • document.body.clientWidth
  • document.body.clientHeight
  • document.documentElement.scrollWidth
  • document.documentElement.scrollHeight
  • document.documentElement.offsetWidth
  • document.documentElement.offsetHeight
  • document.documentElement.clientWidth
  • document.documentElement.clientHeight

結果は、下記のとおりです。

ブラウザ表示モード表示領域のサイズが取得できるプロパティ
IE 6 標準 document.documentElement.clientWidth
document.documentElement.clientHeight
互換 document.body.clientWidth
document.body.clientHeight
FireFox 1.5、2.0 標準 document.documentElement.clientWidth
document.documentElement.clientHeight
互換 document.body.clientWidth
document.body.clientHeight
Opera 9 標準 document.body.clientWidth
document.body.clientHeight
互換 document.body.clientWidth
document.body.clientHeight
Opera 9.5 標準 document.documentElement.clientWidth
document.documentElement.clientHeight
互換 document.body.clientWidth
document.body.clientHeight
Safari 2.0.4 標準 window.innerWidth
window.innerHeight
互換 window.innerWidth
window.innerHeight

FireFoxOperaのwindow.innerWidth、window.innerHeightでは、スクロールバー自体も含んだサイズとなるので、スクロールバーが表示されている場合には、表示領域のサイズより+10数px大きいサイズになってしまいますので注意が必要です。

こちらも参考にどうぞ。


[関連]


-------------------------

追記@2008/06/13

Opera9.5について追記しました。


-------------------------

追記@2007/05/20

Safariについて追記しました。

全ブラウザ全ブラウザ 2007/12/21 03:24
全ブラウザで使えた document.body.clientWidth
Forefoxで0となった document.body.clientHeight

全ブラウザ全ブラウザ 2007/12/21 03:43
http://forum.mozilla.gr.jp/?mode=one&namber=40541&type=0&space=0&

全ブラウザ全ブラウザ 2007/12/21 03:59
Vista IE 7.0.6
Vista Grani 3.1
Vista Sleipnir 2.6.1
Vista Firefox 2.0.0.11
Vista Opera 9.24
Vista Safari 3.0.4

onozatyonozaty 2007/12/21 23:51 標準モードだと、Firefoxでdocument.body.clientHeightは0になるようです。
標準モードの場合には、document.documentElement.clientHeight の方を参照すると思った値が取得できるはずですのでお試しください。

ブラウザブラウザ 2007/12/22 05:56 Firefox 2.0.0.11 では
alert(document.documentElement.clientHeight);
の表示が0でした・・・

ブラウザブラウザ 2007/12/22 06:28 W=document.body.clientWidth;
H=document.body.clientHeight;
if(0==H){H=W;}//FirefoxAdjust;

ブラウザブラウザ 2007/12/22 06:33 Safari 3.0.4 新たに分かったこと
上下のウインドウ変化に無反応だった

ブラウザブラウザ 2007/12/22 08:32 ツリー一括表示 document.body.clientHeight /ブラウザ
http://forum.mozilla.gr.jp/?mode=all&namber=40541&type=0&space=0&

コピーしたHTMLソースを貼りつけて実験できます
http://homepage2.nifty.com/tomoarai/java/exper.html

全ブラウザ全ブラウザ 2007/12/22 09:00 ソースの途中位置では
全ブラウザで使えた document.body.clientWidth
Firefoxで0となった document.body.clientHeight

ソースの最後位置では
全ブラウザで使えた document.body.clientWidth
全ブラウザで使えた document.body.clientHeight

全ブラウザ全ブラウザ 2007/12/22 09:20 IEではテーブルなどのドット位置関係を定めてから
描画するので数値が得られるようですが
Firefoxはテーブルなどのドット位置関係を定めずに
描画を始めるので数値が得られない瞬間があるのかもしれません

onozatyonozaty 2007/12/22 10:26 いろいろ情報ありがとうございます!
私は画面表示と同時にサイズを取得したい場合には、windowのonloadイベントで取るようにしていたので、画面表示途中でそういった差があることに気がつきませんでした。
やっぱり、windowsのonloadイベントで取得するのが安全っていうことですね。

OperaOpera 2008/06/13 00:01 Opera9.5では、標準モードで
document.documentElement.clientWidth
document.documentElement.clientHeight
になったようです。

onozatyonozaty 2008/06/13 23:55 ありがとうございます!
Opera9.5について追記させていただきました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証