読者です 読者をやめる 読者になる 読者になる

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

[programming]
スポンサーリンク

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


IE、FireFoxOperaSafariにて、表示モード毎に参照すべきプロパティをまとめてみました。(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について追記しました。