Androidブラウザ+JSで傾きイベントを取得する
今回はAndroidの標準ブラウザでの回転動作の取得方法です。iPhoneのSafari（iPadも同様かと思います）は以下の方法で取得可能です。
/* onorientationchangeでデバイスの角度変更イベントを発生 */
window.onorientationchange = function()
{
/* orientationでデバイスの角度を取得。主に90,0,-90が取得できます */
var iR = Math.abs( window.orientation );
( iR == 90 )? alert('90度回転して、横向きになりました') : null
}
このwindow.orientationはAndroidデバイスでも取得可能なのですが、onorienattionchangeイベントは無効なようなのでAndroidの場合はonresizeイベントで取得します。
/* onResizeでデバイスの角度変更イベントを発生 */
window.onresize = function()
{
var iR = Math.abs( window.orientation );
( iR == 90 )? alert('Androidでも90度回転して、横向きになりました') : null
}
これを使って、body要素やwrapper用のdiv要素など任意の場所にjQueryを使って、addClass()でたて向きレイアウト用のclassを追加してあげれば、たて向きレイアウトのCSSを適応できます。こんな感じに。
/* classを追加したい要素にorientaner()を。引数は追加したいクラス名（CSS定義する際は、デバイス名[android or iOS]+引数で指定したクラス名） */
$('body').orientaner('_Longitudinal')
/* jQueryにエクステンドしてみた */
jQuery.fn.extend({
orientaner: function( cls )
{
var _this = $(this)
/* デバイス判別 */
$.browser.android = /android/.test(navigator.userAgent.toLowerCase())
$.browser.iphone = /iphone/.test(navigator.userAgent.toLowerCase())
$.browser.ipad = /ipad/.test(navigator.userAgent.toLowerCase())
$.browser.ipod = /ipod/.test(navigator.userAgent.toLowerCase())
$.browser.iOS = ( $.browser.ipod || $.browser.ipad || $.browser.iphone )? true : false
/* 傾きイベント */
var _orientationAddClass = function(device)
{
var iR = Math.abs( window.orientation );
( iR == 90 )? _this.addClass(device+cls) : _this.removeClass(device+cls)
}
/* デバイス別[ android or iPhone&iPad&iPod ] */
if( $.browser.android ) window.onresize = function(){ _orientationAddClass('android') }
else if( $.browser.iOS ) window.onorientationchange = function(){ _orientationAddClass('iOS') }
}
})
ちなみにviewportを設定すれば画面フィットしたレイアウトになります。iOSの場合はwrapper要素はwidth値を100%にしておけばたて向けのレイアウトにうまくフィットしますが、Androidの場合はこの方法ではうまくいきません。それ用にwindow.onresizeイベントで細かい値を設定していかなければならないようです。ライブラリを使わず自分で実装する場合はこの辺りを気にしておけばある程度実現できると思われます。というか一番いいのはwebブラウザの回転を阻止できるものがあればいいんですけど…。
