制作記事 Web制作マークアップhtmlスマートフォン用に最適化したサイトを作る際の<実践>最小マークアップ

スマートフォン用に最適化したサイトを作る際の<実践>最小マークアップ

<!DOCTYPE html>
<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