[JavaScript] モニターの利用可能なサイズを取得する（availWidth、availHeight）

投稿日：2018年9月22日

モニターの利用可能なサイズを取得するには、screen.availWidth、screen.availHeight を使用します。

サンプルソース

例）ボタンを押すと、モニターの利用可能なサイズを表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>モニターの利用可能なサイズを取得するサンプル</title>
<script>
function test(){
  //モニターの利用可能なサイズを取得する
  var w = screen.availWidth;  //X方向のサイズ
  var h = screen.availHeight; //Y方向のサイズ

  //アラート表示する
  alert(w + "x" + h);
}
</script>
</head>
<body>
  <input type="button" value="ボタン" onclick="test();">
</body>
</html>

<!DOCTYPE html>

<head>

<title>モニターの利用可能なサイズを取得するサンプル</title>

function test(){

//モニターの利用可能なサイズを取得する

var w = screen.availWidth; //X方向のサイズ

var h = screen.availHeight; //Y方向のサイズ

//アラート表示する

alert(w + "x" + h);

}

</script>

</head>

<body>

</body>

</html>

実行サンプル

ボタンを押すと、お使いのモニターの利用可能なサイズを表示します。

解説

利用可能な幅を取得するにはscreen.availWidth、高さを取得するにはscreen.availHeightで取得できます。
単純にディスプレイのサイズを取得するには、以下ページをご覧ください。
⇒ [JavaScript] ディスプレイのサイズを取得する
単位はpxです。

執筆者：とら