画面の解像度 (スクリーンのサイズ) を取得する - JavaScript

JavaSciptで画面の解像度、スクリーンサイズを取得するコードを紹介します。

概要

WebサイトにアクセスしてきたPCの画面の解像度を取得したい場合があります。Webサイトへのアクセスのため、アクセスしたPCの画面の解像度を直接は取得できませんが、WebブラウザのJavaScriptを利用するとアクセス元PCの画面の解像度を取得できます。

取得方法

JavaScriptの "window.screen" オブジェクトに画面に関する値が格納されています。
画面の解像度はwidth, heightプロパティから取得できます。

screenオブジェクトには以下のプロパティがあります。

値名	型	値の意味
availHeight	Number	タスクバーなどを引いた実際に有効な画面領域の高さ
availWidth	Number	タスクバーなどを引いた実際に有効な画面領域の幅
bufferDepth	Number	仮想画面（内部画面／オフスクリーン）の色数ビット
colorDepth	Number	色深度(カラービット数)
deviceXDPI	Number	モニタの横方向のDPI
deviceYDPI	Number	縦方向のDPI
fontSmoothingEnabled	Boolean	フォントスムージングが有効か
height	Number	スクリーンの高さ
logicalXDPI	Number	モニタの横方向の論理DPI
logicalYDPI	Number	モニタの縦方向の論理DPI
msOrientation	String	画面の向き (縦方向/横方向)
onmsorientationchange	NULL
pixelDepth	Number	スクリーン解像度(ビット/ピクセル)
systemXDPI	Number	横方向のシステム解像度(DPI)
systemYDPI	Number	縦方向のシステム解像度(DPI)
width	Number	スクリーンの幅

コード例

以下のコードを記述します。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
  <!--
  function pageLoad() {
    var obj = GetDisplaySize();

    target = document.getElementById("output");
    target.innerHTML = "ScreenWidth:" + obj.width + "</br>"
      + "ScreenHeight:" + obj.height + "</br>"
      + "availWidth:" + obj.availWidth + "</br>"
      + "availHeight:" + obj.availHeight + "</br>";
  }

  function GetDisplaySize()
  {
    // 解像度
    this.width = window.screen.width;
    this.height = window.screen.height;

    //有効画面サイズ
    this.availWidth = window.screen.availWidth;
    this.availHeight = window.screen.availHeight;

    return this;
  }
  // -->
  </script>

</head>
<body onload="pageLoad();">
  <div id="output"></div>
</body>
</html>

解説

ページの読み込み時にpageLoad()関数を実行します。pageLoad関数中で、GetDisplaySize()関数を呼び出します。
GetDisplaySize()関数を呼び出すと、window.screenオブジェクトを取得し、"width","height","avaliWidth","avaliHeight"をプロパティに持つ関数オブジェクトを返します。
戻り値のオブジェクトのプロパティの値を画面に出力し、アクセスしてきた端末の解像度を表示します。