[ Javascript ] 画面（ディスプレイ）の解像度を取得する ( window.screen )

WEB サイトを作成する場合に、使用している端末のディスプレイのサイズによってデザインや文字の大きさを変更したい場合があります。Javascript で端末の画面の解像度がわかれば、それにあわせてスタイルシートを変更したりすることもできます。

また、現時点ではスマートフォン、タブレット、PC などに対応したレスポシシブデザインへの需要が高いです。ディスプレイのサイズを動的に取得する手法で対応することが一般的かどうかはわかりません。（違うような気がします）

解像度を取得するサンプルスクリプト

function showDisplaySize()
{
    // 解像度を取得
    var sh = window.screen.height;
    var sw = window.screen.width;
    alert('解像度 幅 ' + sw + 'px, 高さ ' + sh + 'px');

    // 実際に有効な画面サイズ
    var ash = window.screen.availHeight;
    var asw = window.screen.availWidth;
    alert('有効な画面サイズ 幅 ' + asw + 'px, 高さ ' + ash + 'px');

    return;
}

画面の解像度を変更すると、その変更後の解像度が取得するされることが確認できます。ブラウザの再起動などの必要はありません。また、タスクバーなどが固定表示されている場合などは、解像度と実際に使用可能な画面領域のサイズが異なって取得できることを確認しました。

ただし、2012年3月時点のメジャーなブラウザ（IE9、Chrome、Firefox、Opera、Safari）では正常に値が取得できたことを確認したのみですので、少々古い情報です。

 

一体いつの情報だよ！