Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:50.

ディスプレイ(画面)の横幅・高さを得る

JavaScriptでは、ウェブページの閲覧者が利用している環境の、ディスプレイ(画面)の横幅や高さを知ることができます。ブラウザのウインドウサイズではなく、ディスプレイそのものの大きさです。
以下のボックスには、あなたのディスプレイの大きさが表示されているはずです。

閲覧者(JavaScriptが実行されている環境)のディスプレイサイズを知るには、screenオブジェクトのwidthプロパティやheightプロパティを参照するだけです。
例えば、以下のようなJavaScriptソースで得られます。

var sw = screen.width;
var sh = screen.height;

上記のJavaScriptソースで、変数swにはディスプレイの横幅が格納され、変数shには高さが格納されます。
さらに、以下のように書けば、先ほどの実行例のように画面サイズを出力できます。

document.write("画面サイズは、 " + sw + "×" + sh + " です。");

閲覧者のディスプレイサイズを把握できれば、ディスプレイいっぱいに広げたサブウインドウを生成したり、描画に必要となる面積が足りているかどうかを事前に調べたりするのに活用できそうです。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど