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">
といった具合にクラスが変化します。
こんな感じでそれぞれ端末の状態で別々のクラスを追加することで
スマートフォンサイト制作の際に細かな切替なども簡単に可能になるかと思っています。
ご参考までに。。。