DB（カヤック デザイナーブログ）

こんにちは。意匠部ME課のtacamyです。

CSS Nite 4周年記念イベント（Vol.40 reprise）にてご紹介した
iPhone Webアプリのテンプレートセットを配布します。

イベントの内容はこちらのエントリーをご覧ください。

ダウンロード

iphone-tmpl.zip

セット内容

index.html

HTML5+iPhone用HTML

css/iphone.css

HTMLの新要素＋iPhone専用CSS

js/iphone.js

URL&検索バーを消す指定

js/lib/jquery.js

jquery

apple-touch-icon.png

Webクリップアイコン

cache.manifest

マニフェストファイル

.htaccess

.manifestのMIMEタイプ設定

viewportについての補足

このテンプレートはコンテンツ幅100%で制作されることを前提に
viewportを指定しています。

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

必要に応じてviewportの指定を変更してください。

■参考サイト

• Viewport [iPhone生活]
• iPhone向けWebアプリを作ろう（ビューポートの設定）[@IT]
• iPhone 3G用のWebページを作る1 [All About]

■Googleの場合

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">

コンテンツ幅100%で制作され、
横表示では文字サイズはそのまま、コンテンツの幅が広がる。

■Yahoo!Japanの場合

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">

コンテンツ幅100%で制作され、
縦表示はアイコンが横に4つ並び、横表示ではアイコンが6つになります。

■イケメンホイホイiPhone版の場合

<meta name="viewport" content="width=480; user-scalable=no">

イケメンが３人ピッタリ収まるように、縦横どちらでも全く同じ見え方にしたかったので、
横幅480px固定で作り、縦にしたときはコンテンツ全体が自動縮小するようにしました。