第45回 「画面サイズの取得」
今回は画面サイズの取得について説明します。画面サイズは
screen.width
screen.height
で求めることができます。screen.widthは画面の横幅、screen.heightは画面の縦幅を返します。
以下のプログラムは画面の横幅と縦幅をアラートダイアログに表示します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
w = screen.width;
h = screen.height;
alert(w+","+h);
// --></script>
</head>
<body>
</body>
</html>
画面の領域を全て使うことができる場合とそうでない場合があります。特にMacintoshの場合にはメニューバーが画面上部にあるため、画面サイズに合わせてウィンドウサイズを設定したりするとウィンドウが画面からはみだしてしまいます。Windowsでもタスクバーが表示されている場合には、同様にウィンドウがタスクバー下に隠れてしまうことがあります。
このような場合にブラウザで使用可能な有効なサイズも求めることができるようになっています。これは
screen.availWidth
screen.availHeight
で求めることができます。availWidthが画面の有効な横幅、availHeightが画面の有効な縦幅になります。以下のプログラムは画面の有効な横幅と縦幅をアラートダイアログに表示します。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
w = screen.availWidth;
h = screen.availHeight;
alert(w+","+h);
// --></script>
</head>
<body>
</body>
</html>
これを元にしてウィンドウを画面いっぱいに広げるプログラムが以下のものです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
w = screen.availWidth;
h = screen.availHeight;
moveTo(0,0);
resizeTo(w,h);
// --></script>
</head>
<body>
</body>
</html>
moveTo(0,0)として画面の左上にウィンドウを移動させておかないと現在の位置からサイズだけが広がってしまいます。また、ブラウザによってはresizeToがウィンドウの内側（ページ内容が表示される範囲）か、外側か（ウィンドウの外観も含める）によって違うため、ブラウザやOSなどによって細かく切り分けないといけない場合も出てきます。この場合は、ブラウザ別に分岐させて処理するか、特定の環境のみサポートすることになります。単純にフルスクリーンにしたいのであれば環境は限られますがサブウィンドウを開く時のパラメータを指定すれば可能です。
次回はサブウィンドウについて説明します。