スマホやブラウザの画面サイズや向きを取得してやんよ!!!

アプリケーションを実行しているスマホの画面サイズや向きを動的に取得できれば、それに応じて表示するコンテンツを調整できますよね。

画面サイズを取得する

JavaScriptで画面サイズを取得するためのプロパティが用意されています。

ウィンドウサイズを取得できる関数

screen.width

document.write(screen.width);

画面の幅を取得することが出来ます。

screen.height

document.write(screen.height);

画面の高さを取得することが出来ます。
画面サイズとタスクバーを除いたスクリーンサイズを取得することが出来ます。

コンテンツ領域を取得できる関数

window.innerWidth

document.write(window.innerWidth);

ウィンドウ内側の横幅を、取得したい場合に使用。
※ スクロールバー領域を含む。

※ブラウザごとの定義の違い

IEはスクロールバーを含まないパラメーターを取得するが、FireFoxとOperaはスクロールバーを含む値としてwindow.innerWidthの定義が異なる。

window.innerHeight

document.write(window.innerHeight);

ウィンドウ内側の縦幅を、取得したい場合に使用。
window.innerWidthとwindow.innerHeight共に「window.」の記述は省略可能。
IE9では使用可能だがIE8以前では対応していない。

デバイスの向きを判別する

window.onorientation

デバイス端末の向きを取得するプロパティ。どちらに傾いているのかも判定できる

※iOSでは問題なく使えますが、Android2.2以前ではサポートされていません。

2014年現在、管理人のアクセス解析でAndroid4.0以前のユーザーはほとんどいないでのもうそろそろ気にする必要もないかもです

値	端末の向き
0	通常（縦向き）
90	右向き90度（横向き）
-90	左向き90度（横向き）
180	逆さ向き（縦向き）

デバイスの向きをalert表示

var orient = window.onorientation;
if(Math.abs(window.orientation) === 0){
    alert("横向き");
} else {
    alert("縦向き");
}

window.onorientationのプロパティの絶対値が0であれば「横向き」、それ以外は「縦向き」としてalert表示。

傾きを変える度に現在の傾きを判定

var orient = window.onorientation;
$(window).on("orientationchange resize",function(){
	if (Math.abs(window.orientation) === 90){
		alert("横")
	}else {
		alert("縦")
	}
});

デバイスの傾きが変わる度にそれぞれの傾き処理を行います。

iPhoneとAndroidの処理の違い

なんとiPhoneとAndroidでは上記の同じ記述でも処理が行われる順番が異なります。

iPhoneの場合

• ①ウィンドウのサイズ変更
• ②resizeイベント
• ③orientationchangeイベント

Androidの場合

• ①orientationchangeイベント
• ②ウィンドウのサイズ変更
• ③resizeイベント

となるので画面幅を自動取得する順番が異なる鬼畜仕様なんですね。ニュータイプへの変革の道は遠い・・・。

画面サイズを変更してから傾き処理始まっても意味ないやん・・・
フリックスライダーなどで幅を自動取得で広がってくれるタイプが見当たらないのも納得です。

その他の領域を取得できるプロパティ

JavaScriptで画面領域を取得できるプロパティが思いの外たくさんあったので一覧をまとめてみました。（※はＩＥには非対応のプロパティです。）

取得結果で現在ご使用のディスプレイサイズとウィンドウサイズが出力されます。

取得領域	プロパティ	取得結果
画面幅	screen.width
画面高	screen.height
有効画面幅※	screen.availWidth
有効画面高	screen.availHeight
表示領域幅※	window.innerWidth
表示領域高※	window.innerHeight
ウィンドウ幅※	window.outerWidth
ウィンドウ高※	window.outerHeight
表示領域幅	$(window).width()
表示領域高	$(window).height()
表示領域幅	document.documentElement.clientWidth
表示領域高	document.documentElement.clientHeight
ドキュメント幅	$(document).width()
ドキュメント高	$(document).height()

デバイスの画面サイズと向きを出力する

アプリ画面で立て向き専用に設定したい場合もありますが、スマホのwebブラウザ上でアプリを動作させている限り、画面の向きを固定することはできないので、
window.onorientationchange関数を利用して、端末の向きを監視して、意図しない向きになった場合に、端末を回転するalertを表示させるイベントを記述

HTML記述

<div id="yanyo"></div>

JavaScript記述

window.onorientationchange = yanyoInfo;
yanyoInfo();
function yanyoInfo(){
	document.getElementById("yanyo")
	.innerHTML =
	"画面の幅 = " + screen.width + " px<br />" +
	"画面の高さ = " + screen.height + " px<br />" +
	"画面内の幅 = " + window.innerWidth + " px<br />" +
	"画面内の高さ = "　+ window.innerHeight + " px";
}
if (window.innerWidth > window.innerHeight) {
	alert("横向き");
}else{
	alert("縦向き");
}

デモページ

こちらのページを各デバイスで見てもらえると、そのデバイスの全体の画面幅と画面高さ・ツールバー等を除いたコンテンツ幅とコンテンツ高さを表示し、現在のデバイスの向きをアラート表示します。