<html lang="ja">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="robots" content="ALL" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
</head>
<body>
</body>
</html>
meta
robots,description,keywords
PCと同様。あえて説明は要らんですね。
viewport
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
スマホに最適されたコンテンツであることを前提にするので、拡大縮小の設定はオフにしています（もちろん可変にしたいときは適時値を設定）。
contentの値は「,」で区切る（「;」はダメ。「;」だとiOS5からwarning出るので要注意）。
ちなみにAndroidでは、viewportの「width」は効きません。その代わりが「target-densitydpi」です。
- target-densitydpiで有効な値
- device-dpi（端末依存:デフォルト いわゆるdevice-width）
- high-dpi（240dpi）
- medium-dpi（160dpi）
- low-dpi（120dpi）
- 数値（70-140）
効いてたと思ってたのは、Androidでは、いわゆるdevice-widthがデフォルト設定になっているため。
とはいえ、
<meta name="viewport" content="width=device-width,target-densitydpi=medium-dpi">
と書くとiPhoneのデバッカで、「target-densitydpiなんて知らん」と怒られます。
参考：http://developer.android.com/reference/android/webkit/WebView.html
format-detection
<meta name="format-detection" content="telephone=no" />
ありがた迷惑なのが、文字列に数字が並んでいると勝手にリンクになり、その番号に電話をかけれるようになります。このデフォルト設定を無効にします。
電話をかえれるようにしたい場合は
<a href="tel:03xxxxxxxx">03-xxxx-xxxx</a>
とマークアップします。
ホームアイコン
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />
アイコンのパスは任意。
いつも悩むのが画像サイズはどうしたらいいのか？とりあえず、端末やバージョン別の管理を避けるべく、これからは「114px x 114px」にしようかな、と思っています。
- アイコンサイズ
- iPhone 57px X 57px
- iPad / android 72px X 72px
- iOS4以降 114px x 114px
参考：
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
http://developer.android.com/guide/practices/ui_guidelines/icon_design_launcher.html