スマホ用サイト制作の基本をまとめました。まずは素材の味を知ることですね。

使用できる標準日本語フォント

  • iOS（iPhone/iPad）で使用できる日本語フォントは「ヒラギノ角ゴ Pro W3/W6」
  • Android は「DroidSansJapanese」※標準ではボールドなし

画面解像度の違い

  • iPhone 4/4S は「960×640px（解像度326ppi）」
  • iPhone 3G/3GS は「480×320px（解像度163ppi）」
  • 新iPad は「2,048×1,536px（解像度264ppi）
  • iPad/iPad 2 は「1,024×768px（解像度132ppi）
  • Android は「スマートフォン比較表」を参照

表示できる画像フォーマット

  • iOS は png（推奨）, tif, jpg, gif, bmp
  • Android は png（推奨）, jpg, gif, bmp

    • ※iOS で SVG（Scalable Vector Graphics）が使えるようです。Android の タブレットに搭載されている Honeycomb（3系）では SVG をカバー。2系は未対応。

    HTML5, CSS3の対応表

    「Mobile HTML5」や「HTML5対応状況 – Droidget-jp」を参照。実機があるなら「What’s my IP?, What’s my browser?」にアクセスして調べてみるのがスマート。

    viewport

    iOS と Android は、meta タグで viewport をサポートします。 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    • width（画面の幅）を「device-width（デバイスの幅に合わせる）」もしくはピクセル指定
    • initial-scale（初期拡大率）を「1.0（width で設定したデバイスの幅の100％表示）」
    • minimum-scale（拡大率の最小値）を「1.0（100％表示）」
    • maximum-scale（拡大率の最大値）を「1.0（100％表示）」
    • user-scalable（ズーム操作を許可するかどうか）を「no（拡大縮小しない）」

    reset.css

    reset.css は「Yahoo! UI Library」でホスティングされているものなどを使います。

    <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css">

    この内容に加えて、ナビゲーションのリンクをブロック要素に変更し、画像サイズはデバイスの幅に合わせるようにします。

    nav li a {
	display: block;
}
img {
	max-width: 100%;
	height: auto;
}

    htaccessでの振り分け

    サーバ側でスマホを判定して URL を振り分ける場合は .htaccess にこのように書きます。

    <IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} (iPhone|ipad|Android.*Mobile|Windows.*Phone) [NC]
RewriteCond %{QUERY_STRING} !mode=pc
RewriteRule ^$ /smartphone/ [R,L]
</IfModule>

    その他の情報など

    こちらの関連記事もあわせてどうぞ！