Internet Explorer上のJavaScriptで、クライアントサイズが取得できない問題【▲→川俣晶の縁側→ソフトウェア→技術雑記】

　Internet Explorer 6.0のstandards-compliant modeを使用した場合、どうやらJavaSctiptプログラムからdocument.body.clientHeightでウィンドウのクライアント領域のサイズを取得できないようです。

　ここでいう「ウィンドウのクライアント領域のサイズ」とは、基本的にWindows APIでいうところのクライアント領域のサイズに相当するものですが、ツールバーなどは含まないウィンドウ内部の領域のサイズを意味します。

検証プログラム1・standards-compliant modeを使用 §

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>test008 css1compat</title>

</head>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>test008 not css1compat</title>

</head>

</body>

</html>

　前者は、Webブラウザのウィンドウサイズに関わらず常に同じ値(18, おそらくフォントサイズの指定によって変わると推定)を表示します。

　後者は、Webブラウザのウィンドウサイズによって変化する値を表示します。おそらく、クライアント領域の縦サイズと思います。

　このことから、以下の2つのことが推測されます。

standards-compliant modeの相違は、document.body.clientHeightの挙動に決定的な非互換性をもたらす (これを使う場合、モードの切り替えは簡単にはできない。また、汎用ライブラリなどを作る場合は、どちらのモードで実行されているか判定して動作を変える必要がある)
standards-compliant modeでは、document.body.clientHeightを用いてウィンドウのクライアント領域のサイズを取得できない

　document.body.clientHeightではなく、document.documentElement.clientHeightを使うと取得できます。

　以下のコードは、standards-compliant modeになりますが、意図したクライアントサイズの取得に成功します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>test008 css1compat with fix</title>

</head>

</body>

</html>

　Googleマップが、クライアントサイズにフィットする機能を実現している以上、何かあるはずだと思ったらありました。

　まさにスリルと冒険の世界ですね。