スマホサイト制作

提供:Wiki@KDS
2011年9月2日 (金) 12:50時点における192.168.200.108 (トーク)による版
ナビゲーションに移動 検索に移動

スマートフォンサイト案件が来たときのために、スマホサイト制作についてまとめておきます。
※このページは、たにぐちまこと著「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の設定