Coder's Note

JavaScriptでiPhone/iPadの向きを検出する

検出というとたいした事のように聞こえますがたいした事はなくて、今iPhoneが横向きなのか縦向きなのかをJavaScriptで判別してやろうということです。向きが判別できると縦横それぞれの場合にCSSを切り替える事もできるようになるので、Webアプリを作る際に役にたちそうです。（CSSの指定で切り替える方法もありますが、それは後日…）

傾きを取得する

傾きを取得するためには「現在の傾き（角度）」「傾いたかどうか」を取得できなければなりません。

傾き（角度）を取得する

iPhoneが今何度傾いているかは、window.orientationで知る事ができます。この値が90度（-90度）になった場合は横に傾いている、という事にしちゃいます。

傾いたかどうかを知る

orientationchangeというイベントで、iPhoneが傾いたかどうかを判断できます。

デモ

横に傾けたときにテキストが「あ、今横向きでしょ？」、縦のときは「縦向きじゃない？」と切り替わるデモです。iPhone/iPadで見たときの動作デモをアップしましたので、iPhone/iPadでアクセスしてみてください。

JavaScript

一部jQueryを使っていますが、デモのコードです。

// イベントを登録
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

function setOrientation()
{
    var orient = Math.abs(window.orientation) === 90 ? 'あ、今横向きでしょ？' : '縦向きじゃない？';
    $('body div').html(orient);
}