0

iPod touch用サイトのtips

ほとんど個人的な備忘録。
metaタグはこれでひとまずOK
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/>

width
touchの横幅です。現状のtouchでは320にしとけば問題ありません。

initial-scale
ページロード時の拡大縮小率です。ここでは1.0倍です。
完全にtouch用のサイトは、これ以上拡大縮小する必要はありません。

maximum-scale
拡大縮小率の上限です。ここでは1.0倍です。
ここも完全にtouch用のサイトは、これ以上拡大縮小される必要はありません。

user-scalable
ユーザーが指のタッチで拡大縮小できるようにするかを指定。ここではnoです。できません。

■appleで推奨されてる書き方です。
テキスト
テキストはすべて、黒色のHelvetica、20ポイント
テキストはなるべく読みやすくするために太字で、あまり重要でないコンテンツには標準フォント
bodyに「-webkit-text-size-adjust:none;」というセレクタをいれる。


項目間の区切り線はR=217、G=217、B=217

マージン
テキストは左端から10ピクセル内側に、セルの下端の線から14ピクセル内側に設定

「>」こんなマーク
セルの右端から10ピクセルに配置し、垂直方向では中心に配置。

これさえ頭にいれときゃ、iPod touch用サイトがつくれます。

大阪のWEB屋です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です