スマートフォン対応 - naobe @ ウィキ

WEBアプリケーションに戻る

Androidを対象に記述する。
参考文献：ASCII iPhone+Androidスマートフォンサイト制作入門

画面

項目	説明
ディスプレィサイズ	3.5～4.0インチ
解像度	320x480px～640x960px

ビューポートの設定

HTMLに以下を追加する。PCはviewport設定に影響されないので、PC/スマホ共通のHTMLに記述可能。

 <meta name="viewport" content="width=550; initial-scale=0.60; user-scalable=yes">

属性	説明
width	スマホに表示する画面の幅
initial-scale	初期倍率。1にするとPCの表示より若干小さい表示になる。この値を微調整して画面いっぱいになるよう調整する
user-scalable	yes:手動で拡大、縮小可能

スマートフォンサイトへの誘導

リクエストのユーザエージェントにiPhoneまたは、Androidの文字列があればスマートフォンからのリクエストと判定する。

【例】

 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || na  vigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
     if(confirm('プレイグループ木場へようこそ。€このサイトにはスマートフォン用のサイトがあります。  表示しますか？')) {
         location.href = 'http://iphone.playgroup-kiba.com';
     }
 }

iPadの初期バージョンのユーザエージェントにはiPhone文字列が含まれていたのでiPad文字列が含まれないことを条件に追加する。iPodもスマートフォンとみなす。