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

iPhone/iPadで向きを検出する

iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。

そういった場合に利用できるのがメディアクエリーのorientationです。

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出来ます。

サンプル(縦向きの場合は赤、横向きの場合は青の背景になる。)

メディアクエリーのorientationはCSS3で定義されていますのでiPhone/iPadだけではなくSafariやFirfoxでも動作し、ウィンドウのサイズで読み込むスタイルシートが切り替わります。
参考：W3Cメディアクエリーの日本語訳

iPhone/iPadではonOrientationchangeというイベントが定義されており、このイベントで向きの変更を検出することが出来ます。また、window.orientationという変数には現在の角度が格納されており、この角度が90度(-90度)の場合は横向きと判定することが出来ます。

jQueryを利用すると次のような感じで向きが変更された際のイベントを得ることが出来ます。

$(function(){
	$(window).bind("orientationchange",function(){
		if(Math.abs(window.orientation) === 90){
			$("body").html("横向き");//横向きになった際の命令
		}else{
			$("body").html("縦向き");//縦向きになった際の命令
		}
	})
})

サンプル(iPhone/iPadでしか動きません)

向きによって処理を変えるような場合は初期状態でも縦か横か判定すると思うので、そういった場合は、bind時にloadイベントも追加しておきましょう。

$(function(){
	$(window).bind("load orientationchange",function(){
		if(Math.abs(window.orientation) === 90){
			$("body").html("横向き");//横向きの場合の命令
		}else{
			$("body").html("縦向き");//縦向きの場合の命令
		}
	})
})

サンプル(iPhone/iPadでしか動きません)

orientationchangeイベントは便利なのですが、iPhone/iPadでしか動作しません。PCでもorientationchangeと同様のイベントを実装したい場合は次のようなスクリプトで検出が可能です。

$(function(){
	$(window).bind("resize load",function(){
		if($(window).height()>$(window).width()){
			$("body").html("縦向き");//縦向きの場合の命令
		}else{
			$("body").html("横向き");//横向きの場合の命令
		}
	})
})

サンプル(PCでも動きます)

個人的には開発環境がwindowsということもあり、iPhone/iPadで検証が結構面倒なのでこの方法をよく利用します。(Macの方はiPhone/iPadシミュレータがあるのでそれほど面倒ではないと思いますが)

関連エントリー

iPhone/iPadでダブルタップをJavaScriptで実装する
iPhone/iPadでPCと同じJavaScriptのイベントを実装する
PC用とiPhone用のサイトを切り替える.htaccess
iPhone用CSSをメディアクエリで分岐する問題点
jQuery基礎文法最速マスター

スポンサードリンク

«iPhone/iPadでダブルタップをJavaScriptで実装する | メイン | HTML+CSSコーディング　ベストプラクティス発売»