今回は、Javascriptの screen プロパティで、使用しているモニターのサイズを取得して、ブラウザの上部にアラートで上部に表示させます。
screen
Window の screen プロパティは、ウィンドウに関連付けられた画面オブジェクトへの参照を返します。
// .screen.XXXXX でサイズ
var monitorW = window.screen.width; // 幅を取得
var monitorY = window.screen.height; // 高さを取得
// .screen.availXXXXX で利用可能なサイズ
var possibleW = screen.availWidth; // 幅を取得
var possibleH = screen.availHeight; // 高さを取得モニターの利用可能なサイズを取得するには、screen.availWidth、screen.availHeight を使用します。
利用可能な幅を取得するにはscreen.availWidth、高さを取得するにはscreen.availHeightで取得できます。
モニターのサイズを取得してアラート表示するサンプル
早速サンプルです。
「モニターのサイズ」と「モニターの利用可能なサイズ」を取得するボタンがあります。それぞれのボタンをクリックすると、ウィンドウの上部にアラートでモニターのサイズが表示されます。
2枚モニターを接続して使っている場合は、このブラウザが表示されているモニターのサイズが表示されます。
それぞれのモニタでは異なるサイズが表示されるので、2枚以上のモニターをお持ちの方は試してみてください。
実装の手順と方法
コードの解説の前に、ざっくりとした実装の手順と方法について解説します。
はじめに、HTMLを記述します。
この記事のコードをそのまま使うことはないかと思いますが、その場合は設置したい場所に以下のコードを記述します。
<button id="monitorSize">モニターのサイズ</button>
<button id="monitorPossibleSize">モニターの利用可能なサイズ</button>次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// モニタのサイズ
document.getElementById('monitorSize').addEventListener('click', () => {
var monitorW = window.screen.width; // 幅を取得
var monitorY = window.screen.height; // 高さを取得
// アラート表示
alert("モニターのサイズは、" + monitorW + "x" + monitorY + "です。");
});
// モニタの利用可能なサイズ
document.getElementById('monitorPossibleSize').addEventListener('click', () => {
var possibleW = screen.availWidth; // 幅を取得
var possibleH = screen.availHeight; // 高さを取得
// アラート表示
alert("モニターの利用可能なサイズは、" + possibleW + "x" + possibleH + "です。");
});CSSは無く、これで完成です！
ざっくりとしたコードの解説
コードは、HTML・JavaScriptの2種です。順に解説していきます。
HTML
HTMLは、button タグのみのシンプルな形です。
<button id="monitorSize">モニターのサイズ</button>
<button id="monitorPossibleSize">モニターの利用可能なサイズ</button>各 button タグには後述のJavaScript.addEventListener のクリックでトリガーにする為、ユニークなiidを割り当てし記述します。
JavaScript
JavaScriptは、「モニターのサイズ」と「モニターの利用可能なサイズ」に付与した id名で、.addEventListener のクリックでそれぞれ処理が開始します。
// モニタのサイズ
document.getElementById('monitorSize').addEventListener('click', () => {
var monitorW = window.screen.width; // 幅を取得
var monitorY = window.screen.height; // 高さを取得
// アラート表示
alert("モニターのサイズは、" + monitorW + "x" + monitorY + "です。");
});
// モニタの利用可能なサイズ
document.getElementById('monitorPossibleSize').addEventListener('click', () => {
var possibleW = screen.availWidth; // 幅を取得
var possibleH = screen.availHeight; // 高さを取得
// アラート表示
alert("モニターの利用可能なサイズは、" + possibleW + "x" + possibleH + "です。");
});処理内容もシンプルで、モニターの幅・高さを取得して、alert()で、表示させます。
さいごに
モニターのサイズを取得して何かを行う場合は少ないと思います。
ですが、screen プロパティでサイズを取得して、特定条件以下の場合に何か表示を出すなど、組み合わせてぜひ使ってみてください。
