スマートフォンで傾きを検知するJavascript

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー jQuery

スマホ対応にて、傾きを検知するjsのメモ。

ブログを、PC版と共通の記事を使ってスマホ対応とする場合、viewpointに値を書いてリキッド対応でコーディングしておけばうまいこと表示されるはずなのですが、画像や動画まわりで、jsで動的に値を指定していたり、iframeで貼っていたりなんかのときに、機種により少々解釈が微妙だったり、なんてことがありました。

そこで、縦横を取得して動的に値を書きなおす処理をねじ込むときの自分的メモです。以下ぶっきらぼう気味に。

記述はこちらを参考にさせてもらいました。

現在の傾き具合の取得

傾きは、window.orientationと記述することで取得
返り値は0,90,-90など

var orientation = window.orientation;
if(orientation == 0){
	//縦向きの時の処理を記述
}else{
	//横向き（縦ではない）の時の処理を記述
}

傾いたというイベントを取得

傾いたというイベントを取得するリスナは、iPhoneとAndroidで異なるみたい。
そういうところはいつもながら呆れる。いいかげんに（以下略
ユーザーエージェントを取得して振り分けて取得。

var agent = navigator.userAgent;//UA取得
if(agent.search(/iPhone/) != -1){//iPhoneの場合
	//iPhoneでの傾きイベント取得
	window.onorientationchange = 実行する関数など;
}else{//それ以外
	//Androidでの傾きイベント取得
	window.onresize = 実行する関数など;
}

例えば

上二つを組み合わせて、例えば以下のような処理が可能かと思います。（jQuery使用）

function gazou(){
	var orientation = window.orientation;
	if(orientation == 0){
		$('#gazou').css('width','320');
	}else{
		$('#gazou').css('width','480');
	}
}

$(document).ready(function(){
	gazou();//最初の一回
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1){
		window.onorientationchange = gazou;
	}else{
		window.onresize = gazou;
	}

});

縦の時は320、横の時は480というCSSでのサイズ変更を行っています。

UA取得での分岐処理については今後UAの種類が増えていくに連れ複雑になっていくのかもしれませんが、基本のフローに変化は無い？はず？ですよね。

現時点ではこんな感じでいけるという参考程度にされてくださいませ。動作に関する責は負いかねますので、予めご了承のほど。

javascript スマートフォン 傾き