2010年2月8日月曜日

すべてのWEBサイトをiPhone対応に!

iPhone対応のWEBサイトを作ろう!といっても、なにも携帯サイトのように特別な仕様を用意しなければならないと言うことではありません。iPhoneでは現在あるすべてのWEBサイトが表示が可能(FLASHを除く)なのは言うまでもありません。しかし最適化されていないWEBページだと画面の余白ができてしまい、小さい画面を有効に使うことができませんよね。

そこで、もっとも簡単で有効な最適化方法は、すべてのWEBページの<head>内に、viewport を指定すること。実際PCで表示する最大幅と同じ値を viewport として、指定すればiPhoneでは、無駄な余白を作らず小さな画面いっぱいに表示してくれます。
<meta name="viewport" content="width=800">
WEB制作者としてはこれだけやっておけば、iPhone, iPod touch, そしてやがて登場する iPad(推測)での表示サイズが最適化されるので、あとは閲覧ユーザーがダブルタップで、見たい部分を拡大したり、全体を表示したり、思いのままにブラウジングができるはずです。
ちなみに、ダブルタップとは、iPhone画面で表示されたWEBページの見たい部分を、2回指でタッチすること。これでDIV,IMG,TD,LIなどの要素は画面いっぱいに表示してくれる機能のことです。

実機テストができないWEB制作者も多くいると思いますが、これだけならできますよね。