iPhoneやAndroid(アンドロイド)向けのスマートフォンサイトを制作する際、
各キャリアの縦向き、横向きを考慮した画面設計やHTML構成を考えて制作しなければなりません。

それぞれ端末ごとに細かな設定の変更が必要な場合など
OSの判別をする必要になってきますが、
そんな際に使える、jQueryを使って簡単にOSを判別し、それぞれCSSクラスを追加し
画面の縦/横それぞれ切り替わった際にも別々のクラスを追加するスクリプトの紹介。

jQuery SmartPhone SWITCH

アクセスされたOSと画面の向きを判別して
それぞれ<body>タグにCSSクラスを追加します。

追加するCSSクラスは以下の通り。
—————————————————–
iPhoneには「body class=”iphone”」追加
iPadには「body class=”ipad”」追加
Androidには「body class=”android”」追加
それ以外には「body class=”other”」追加

画面が縦向きの場合は「body class=”portrait”」追加
画面が横向きの場合は「body class=”landscape”」追加
—————————————————–

実際のSCRIPTはjQueryファイルを読み込んだ後、
以下のSCRIPTで実行します。

◆SCRIPT
$(function(){
	setOperate();
});
function setOperate(){
	setView();
	var agent = navigator.userAgent;
	if(agent.search(/iPhone/) != -1){
		$("body").addClass("iphone"); //iPhoneには「body class="iphone"」追加
		window.onorientationchange = setView;
	}else if(agent.search(/iPad/) != -1){
		$("body").addClass("ipad"); //iPadには「body class="ipad"」追加
		window.onorientationchange = setView;
	}else if(agent.search(/Android/) != -1){
		$("body").addClass("android"); //Androidには「body class="android"」追加
		window.onresize = setView;
	}else{
		$("body").addClass("other"); //上記以外には「body class="other"」追加
		window.onorientationchange = setView;
	}
}
function setView(){
	var orientation = window.orientation;
	if(orientation === 0){
		$("body").addClass("portrait"); //画面が縦向きの場合は「body class="portrait"」追加
		$("body").removeClass("landscape"); //画面が縦向きの場合は「body class="landscape"」削除
	}else{
		$("body").addClass("landscape"); //画面が横向きの場合は「body class="landscape"」追加
		$("body").removeClass("portrait"); //画面が横向きの場合は「body class="portrait"」削除
	}
}

これを使って、それぞれアクセスした端末のOSと画面の向きによって、
リストの網掛け部分が切り替えるサンプルは以下。
jQuery SmartPhone SWITCH【SAMPLE】
※スマートフォンでご覧ください。

iPhoneでアクセスされ画面を縦で閲覧した場合は、

◆HTML
<body class="iphone portrait">

とクラスが追加され、
画面を横向きにすると

◆HTML
<body class="iphone landscape">

といった具合にクラスが変化します。

こんな感じでそれぞれ端末の状態で別々のクラスを追加することで
スマートフォンサイト制作の際に細かな切替なども簡単に可能になるかと思っています。

ご参考までに。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでiPhone、iPad、Androidのそれぞれ縦・横画面の向きを判別してCSSクラスを追加する方法

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner