スマホサイト制作

スマートフォンサイト案件が来たときのために、スマホサイト制作についてまとめておきます。
※このページは、たにぐちまこと著「iPhone+Androidスマートフォンサイト制作入門」から抜粋しております。

スマートフォンの特徴・仕様

まずはスマホのことを知っておきましょう。

■iPhone

解像度：320×480px（4は640×960だがブラウザでは320×480で表示する仕様になっている）
ブラウザ：Mobile Safari（WebKitベース）

「Mobile Safari」の制限

・プラグインに非対応→「Flash Player」が使えない、等
・文字コードの変更ができない→meta要素で文字コードを忘れず指定する
・ウィンドウの制御ができない→常に全画面
・ファイルのアップロード、ダウンロードもできない→アプリで対応
・ファイルサイズなどの制限→「Safari Web Content Guide」参照

■Android

解像度：320×480px～640×960px
ブラウザ：ブラウザ（WebKitベース）

「ブラウザ」の制限

・プラグインに非対応→「Flash Player」は標準搭載（Android2.2以降）
・ファイルのアップロードはできない（ダウンロードは可能）

基本的なマークアップ

Viewportの設定

これにより、仮想ウィンドウサイズを設定することができます。
デフォルトだと「Mobile Safari」の場合は980pxに設定されているので、スマホ専用サイトは見づらくなってしまいます。
それを解消するため、画面の横幅に合うよう設定します。基本的に以下のように記述しておけば大丈夫でしょう。
<meta name="viewport" content="width=device-width, user-scable=no, initial-scale=1, maximum-scale=1">

width＝横幅
user-scable＝ユーザーによる拡大・縮小の許可の有無
initial-scale＝初期の倍率
maximum-scale＝拡大可能な最大の倍率

リセットCSSの読み込み

リセットCSSは、HTML5用のものを用います。HTML5 Doctorが配布している「html5reset.css」を利用するとよいでしょう。