スマートフォン・タブレットの振り分けをどう考える？

デバイスの振り分けをどう考えるか、
ということについて書いてみたいと思います。
今回は、PC/タブレット/スマートフォンと振り分ける場合の参考です。
パターンは4パターン。

ちなみにiPad/Garapagosが出たてくらいまでは、画面解像度とUserEgentで判定して振り分けていたみたいなんだけど、
iPadはもはや次のモデルでは2000px以上の解像度であるし、
今後のモデルがどんどんと高解像度化されることを考えると、少しキリがない感もあるよね。
ただ、高解像度化されても画面サイズは変わらないわけだから、フォントと画像サイズは気にかけなければいけないかもしれないねえ。

1)Media Queriesで分ける

もっとも一般的なやり方。IEの対応だけ気をつけないと。

2)Javascript + UserAgentで振り分けてリダイレクト先を分岐

そもそもHTML側を分けておくという考え方。
んー。どうかなあ。CMSとかで作ってる場合にゃどうするんだっていう。
スマートフォン向けにLP作ってるとか、キャンペーンサイトに飛ばすとか、そんな時には良いのかな。

3).htaccessファイルに記載して振り分ける

.htaccess を使ったページ移動はブラウザにストレスを与えず、リダイレクトでPCページに戻ってしまうようなエラーも防げる。

option + FllowSymLinks
RewriteEngine On
RewriteCond%{HTTP_USER_AGENT}{iPhone|Android|iPad|iPod}
RewriteRule^$/i/[R]

汎用性あるかな？
導入しやすいけど、Apacheを使ってない場合には使えませんな。

4)Javascript + UserAgentで振り分けてCSSを分岐

合わせワザ。
まずJavaScriptで振り分ける。
CSS内部でメディアクエリを使用。
PC、タブレット、スマートフォン用のCSSをユーザーエージェントで振り分け、処理を分岐させる。
document.writeでCSSのリンクをデバイスごとに書き出す。

内にviewportとformat-detectionのを追加する
format-detectionにtelephone=noを追加することで電話番号に自動的にリンクが貼られなくなる。
※これは任意なので、サイト内容によっては外してもかまわない。
viewportは、「画面幅：デバイスに合わせる」、「初期拡縮率：1.0」、「最大拡縮率：2.0」、「最小拡縮率：1.0」、「ユーザー任意の拡縮：可」で設定している。

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>無題ドキュメント</title>
 <meta name="viewport" content="width=device-width,initial-scale=1; maximum-scale=2.0,minimum-scale=1,user-scalable=yes" />
 <meta name="format-detection" content="telephone=no" />
 <link rel="stylesheet" type="text/css" href="style_base.css" />
 <script type="text/javascript" src="optimize.js"></script>
 </head>

PC、タブレット、スマートフォン用のCSSをユーザーエージェントで振り分け、処理を分岐させる。
document.writeでCSSのリンクをデバイスごとに書き出す。

 var ua = navigator.userAgent;
 if(ua.indexOf('iPad') != -1||(ua.indexOf('Android') != -1 && ua.indexOf('EB-WX1GJ') != -1)){ 
 //iPad & Androidタブレット
 document.write('<link rel="stylesheet" href="material/style_tablet.css">');
 }else if(ua.indexOf('iPhone') != -1 || ua.indexOf('iPod') != -1 || ua.indexOf('Android') != -1){
 //iPhone & iPod & Androidスマートフォン
 document.write('<link rel="stylesheet" href="style_smp.css">');
 }else{
 //PC
 document.write('<link rel="stylesheet" href="style_pc.css">');
 }

画面サイズ別にCSSを切り分ける。機種ごとに分ける必要のない共通スタイルはメディアクエリで分けるより前にまとめて書く。

この縦横幅にあわせて、コンテンツのレイアウトを切り分けて書いていく。

 /*iPhone横*/
 @media only screen and(min-device-width: 320px) and (max-device-width : 480px) and(orientation : landscape{/*style*/}
 /*iPhone縦*/
 @media only screen and(min-device-width: 320px) and (max-device-width : 480px) and(orientation : portrait{/*style*/}
 /*iPhone4横*/
 @media only screen and(min-device-width: 640px) and (max-device-width : 960px) and(orientation : landscape{/*style*/}
 /*iPhone4縦*/
 @media only screen and(min-device-width: 640px) and (max-device-width : 960px) and(orientation : portrait{/*style*/}
 /*iPad2横*/
 @media only screen and(min-device-width: 768px) and (max-device-width : 1024px) and(orientation : landscape{/*style*/}
 /*iPad2縦*/
 @media only screen and(min-device-width: 768px) and (max-device-width : 1024px) and(orientation : portrait{/*style*/}
 /*iPad横*/
 @media only screen and(min-device-width: 1536px) and (max-device-width : 2048px) and(orientation : landscape{/*style*/}
 /*iPad縦*/
 @media only screen and(min-device-width: 1536px) and (max-device-width : 2048px) and(orientation : portrait{/*style*/}

ただこれもどんどん新しい解像度が出てくるので、よほど特定のタブレットやスマートフォンに対応する時だけかも。