ブラウザの表示領域幅 その2

前回言及したWindows XPのテーマによるブラウザの表示可能領域の違いについてですが、これはNetscape以外のブラウザで生じます。IEはWindows OSのテーマが「Windows XP」の場合と、「Windows Classic」の場合とで、スクロールバーのデザインが大きく異なり、それはスクロールバー幅やボーダー幅にも影響を及ぼしています。FirefoxとOperaについては、テーマの違いによるスクロールバーのデザインの変化は一見ありませんが、やはり各値に微妙な差異が生じています。

以下は前回の検証と同じ条件で、Windows XPのOSのテーマを、Windows Classicに設定した場合の結果です。Windows XPテーマの時よりも、表示領域が僅かに大きくなります。これはClassicテーマのPCで最大領域幅を設定してしまい、デフォルトのXPテーマユーザのPCでは、横スクロールバーが表示されるという罠にハマった経験から得た成果ですw。

[Windows XPでの検証 その2]

ブラウザ	表示領域幅	スクロールバーの幅	ボーダー幅（左/右）
IE 6/7	1004px	15px	2px/3px
Firefox 2.0	1008px	16px	0px/0px
Opera 9.0	1002px	16px	5px/1px
Netscape 7.1	1009px	15px	0px/0px
Safari 3.0(α)*1	1008px	15px	0px/1px

またMac OSXでの検証結果も掲載しておきます。Macの場合はブラウザによる表示領域の違いはありません。さすがです。

[Mac OSでの検証]

ブラウザ	表示領域幅	スクロールバーの幅	ボーダー幅（左/右）
Safari 2.04	1009px	15px	0px/0px
Firefox 2.0	1009px	15px	0px/0px
Opera 9.21	1009px	15px	0px/0px
Netscape 7.1	1009px	15px	0px/0px

ということで、ダラダラと綴ってきましたが、これらの結果から言える事は、『XGA基準で幅の大きいサイトを作る場合は、最大表示領域幅が一番狭いWindows Operaの1001pxを目安にしよう』というそれだけなのですが、XGA以外の場合でも、ブラウザの表示領域は、これらスクロールバー幅とボーダー幅を使用すれば算出できると思います。

[おまけ]
IEとFirefoxに対しては、overflow-xやoverflow-yといった、スクロールバーの表示を制御するCSSが使えます。

<style>
html {overflow-x:hidden;}
</style>

と記述すれば、どんなに幅が大きくても横スクロールバーは表示されません。

*1:2007/06/13追記