2006-08-02
■[JavaScript][css]ブラウザの表示領域のサイズを取得する方法。
ブラウザの表示領域を取得するに当たって、「ブラウザの種類」×「表示モード(標準/互換)」によって参照するプロパティが変わってきます。
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について追記しました。
トラックバック - http://d.hatena.ne.jp/onozaty/20060802/p1
- http://d.hatena.ne.jp/onozaty/20060802
- http://d.hatena.ne.jp/onozaty/20060803
- http://d.hatena.ne.jp/onozaty/20060807
- 閑話休題 表示領域の取得
- 日記/2007-04-17
- http://d.hatena.ne.jp/onozaty/20070520
- http://d.hatena.ne.jp/okazuki/20070612
- ynakajimaの備忘録 - JS LOOKBOOK ウィンドウのサイズに併せて拡大...
- 0x集積蔵 - 素のIE6でもBookmarkletからAutoPagerizeできるxAutoPag...
- たけひこ日記 - 座長のjsで考えたこと
- ウィンドウの高さを取得する
- Enjoy*Study - Opera9.5から標準/互換モードで参照すべきプロパティ...
- Re: ブラウザの表示領域のサイズを取得する方法
- jQueryで画面の中央に要素を表示する方法
- DUNNO→CLEARブログ - javascriptでブラウザの表示領域の取得方法
- IE6用max-width・min-width
- すたら日記 - 【Javascript】ブラウザの表示領域の高さなどについて
- すたら日記 - 【Javascript】ブラウザの表示領域サイズ取得について
- ××××Diary - bad knowhow
- hello, world. - 特定要素をブラウザ画面全域に広げる
- ?D of K - 日本のJavaScript界隈のブログを適当かつ詳細にまとめて...
- 技術めも - ページの下までスクロールされたことを検出する
リンク元
- 41 http://reader.livedoor.com/reader/
- 29 http://d.hatena.ne.jp/
- 20 http://secure.ddo.jp/~kaku/tdiary/
- 18 http://b.hatena.ne.jp/entrylist?sort=hot
- 11 http://labs.ceek.jp/hbnews/
- 5 http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rls=RNWE,RNWE:2005-09,RNWE:ja&q=java+正規表現+半角文字
- 4 http://b.hatena.ne.jp/entrylist?sort=hot&of=50&threshold=5
- 4 http://b.hatena.ne.jp/entrylist?sort=hot&url=http://d.hatena.ne.jp/
- 4 http://del.icio.us/ma.la
- 3 http://b.hatena.ne.jp/entrylist?sort=hot&of=100&threshold=5

