html4.01を標準準拠モードで書くか過去互換モードで書くかによって、javascriptでのウィンドウ幅の取得方法が変わってしまう模様。
しかもIEとFireFoxで微妙に挙動が違う!
とりあえず実験結果をまとめてみたですよ。
IEの標準準拠モード
document.body.clientWidth=body要素の幅
document.documentElement.clientWidth=ウィンドウに表示されている領域の幅
<スタイルシートとの関係>
・body要素のmarginを指定しておらず、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthはdocument.documentElement.clientWidthより20小さい
・body要素のmarginを0またはautoに指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthとdocument.documentElement.clientWidthは等しい
・body要素のmarginを0またはauto以外に指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthはdocument.documentElement.clientWidthから左右のマージンを引いた数
・ウィンドウ内に全ての要素がおさまらない場合(横スクロール出現)
→document.body.clientWidthは子要素の幅になるため、document.documentElement.clientWidthより大きい
※body要素のmargin指定の有無は影響しない
※上記全ての場合で、document.documentElement.clientWidthは変化しない
IEの過去互換モード
document.body.clientWidth=ウィンドウに表示されている領域の幅
document.documentElement.clientWidth=0
スタイルシートや子要素の幅による変動なし
FireFoxの標準準拠モード
document.body.clientWidth=body要素の幅
document.documentElement.clientWidth=ウィンドウに表示されている領域の幅
<スタイルシートとの関係>
・body要素のmarginを指定しておらず、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthはdocument.documentElement.clientWidthより16小さい
・body要素のmarginを0またはautoに指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthとdocument.documentElement.clientWidthは等しい
・body要素のmarginを0またはauto以外に指定し、ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthはdocument.documentElement.clientWidthから左右のマージンを引いた数
・ウィンドウ内に全ての要素がおさまらない場合(横スクロール出現)
→document.body.clientWidthはウィンドウに表示されている領域の幅からbody要素のmarginを引いた数
※上記全ての場合で、document.documentElement.clientWidthは変化しない
FireFoxの過去互換モード
document.body.clientWidth=ウィンドウに表示されている領域の幅
document.documentElement.clientWidth=ウィンドウに表示されている領域の幅
<スタイルシートとの関係>
・ウィンドウ内に全ての要素がおさまっている場合(横スクロールなし)
→document.body.clientWidthとdocument.documentElement.clientWidthは等しい
・ウィンドウ内に全ての要素がおさまらない場合(横スクロール出現)
→document.documentElement.clientWidthは子要素の幅+body要素のマージン
※上記全ての場合で、document.body.clientWidthは変化しない
……てな感じらしい。
自分で書くときは、標準準拠ならdocument.documentElement.clientWidth、過去互換ならdocument.body.clientWidthを使うようにすればバグは避けられそうだけど、配布物は意識しとかないとドツボにはまりそうですな。
あ、ちなみに、innerWidth(NN用)がからむとさらにややこしい。
Netscape7.1は、document.documentElement.clientWidthに対応してくれないんだな。document.body.clientWidthは対応してるとゆーのに。(そしてdocument.bodyだとNN4.7には効かなかったよーな……あーもー)
最近、こんな記事を知りました。
ttp://sug.blog2.fc2.com/blog-entry-502.html
いま、文月さんが何をお考えでこの記事を書いていらっしゃるのか、上記がお役に立つかどうかわかりませんが。
すでにご存知の手法でしたら、失礼お許しください。
こんにちは、ご無沙汰してます。
阿檀さんのブログもちょくちょく見せていただいてますので、ご紹介いただいた記事は拝見してます。
expression()を使うと記述が短くていいですね。
ただ、結局のところjavascriptを使うことには変わらないので、今回の記事で扱っている「標準モード/過去互換モードにおける挙動の違い」はどちらにしろ関係するのではと思います。(まだ実験してはいないですが)
なお、今回の記事自体は、別件でウィンドウ幅を取得するスクリプトを書く必要があって、その際に実験した結果をまとめてみたものだったりはします。
正直、モードの挙動のあたりは、今ひとつまだ理解できておりません。…理解できていないなら書くなという感じですが(汗)
失礼いたしました。
当方のブログ、見ていただいてるとは、意外でした。もうちょっとマットウな記事を書かないと、と、思ったことでございます^^