ウインドウのサイズ指定の落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　JavaScriptを使用したウインドウのサイズ指定にはふた通りの方法がある。ひとつはwindow.open()で新規で開いたウインドウに対するサイズ指定。そして、もうひとつはウインドウ自身に設定するwindow.resizeTo()だ。これらは一見、同一の動作をするように見えるが、実は微妙に違う。

window.open()はいずれの環境においてもコンテンツ領域をサイズとして判定するため、数値通りの再現結果が期待できる【1】。しかし、window.resizeTo()は、WindowsのIEやSafariにおいては、タイトルバーなどを含めたウインドウ全体をコンテンツ領域と判別しリサイズしてしまうのだ【2】。これにより、シビアなレイアウト状況下では、期待する表現の実現が怪しくなる。

これを避けるためには、あらかじめタイトルバーなどを含めたウインドウサイズを考慮し、大きめにリサイズしておくか、ユーザー側に手動でリサイズやスクロールができる余地を残しておくことで対処をするのが賢明であろう。（文=マルチカ）

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）