JavaScriptでスマートフォンの向きを判定する

JavaScriptでスマートフォンやタブレットの向きを取得してみます。

サンプルコード

スマートフォンの向きはwindow.orientationで取得できます。
縦向きの場合は0か180、横向きの場合は90か-90が返ってきます。

HTML

<div id="direction"></div>

JavaScript

var ua = navigator.userAgent.toLowerCase();
// iPhone
var isiPhone = (ua.indexOf('iphone') > -1);
// iPad
var isiPad = (ua.indexOf('ipad') > -1);
// Android
var isAndroid = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') > -1);
// Android Tablet
var isAndroidTablet = (ua.indexOf('android') > -1) && (ua.indexOf('mobile') == -1);

// iOS
if(isiPhone || isiPad) {
	window.onorientationchange = directionCheck;
}
// Android
if(isAndroid || isAndroidTablet) {
	window.onresize = directionCheck;
}
directionCheck();

function directionCheck() {
	var direction = Math.abs(window.orientation);
	if(direction == 90) {
		document.getElementById('direction').innerHTML = '横向き';
	} else {
		document.getElementById('direction').innerHTML = '縦向き';
	}
}

スマートフォンの向きを変更したときのイベントがiOSとAndroidで異なるので、ユーザーエージェントで分けて処理を行っています。
スマートフォンの向き取得のデモページ