ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。
IE、FireFox、Opera、Safariにて、表示モード毎に参照すべきプロパティをまとめてみました。(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 |
FireFox、Operaのwindow.innerWidth、window.innerHeightでは、スクロールバー自体も含んだサイズとなるので、スクロールバーが表示されている場合には、表示領域のサイズより＋10数px大きいサイズになってしまいますので注意が必要です。
こちらも参考にどうぞ。
[関連]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
追記@2008/06/13
Opera9.5について追記しました。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
追記@2007/05/20
Safariについて追記しました。
