iPhoneサイトを作り始めて、最近気付いた点をメモ。

普通にPCサイトの感覚で作って、いざiPhoneで表示すると文字が大きくてなんか他のiPhoneサイトと違うな・・・と思った場合の対処法です。

下記のmetaタグを入れればOK。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=0.6, width=device-width, user-scalable=no" />

これで画面サイズが横幅きっちりとなります。
(但し、画面の横幅以上のwidthの値を設定しているものがあれば別です)

でも、これだけではまだフォントサイズがしっくりしない・・・っていうかでかいです。
cssの内容にもよるとは思いますが私の場合はでかかったです。

そこでスタイルシートで下記の通りに設定。

* {
-webkit-text-size-adjust:100%;
}

サイズはこれでOK。
あとは、下記リンクにiPhoneに搭載されているフォントの一覧がありますので、ここを参考にお好みのフォントを設定すればiPhone対応っぽいサイトに見えるはずかと。

【iPhone & iPad　搭載フォントを調べてみた】–サイト作りの参考に　iPhone編 | tuglog!
http://blog.tug.lomo.jp/?eid=990243