とりあえずiPhoney等でサイトを見て安心してたら大間違い。

同じSafariブラウザでもiPhoneやiPod touchのそれは、Macとは振る舞いやお作法がまったく違うことも。

例えば、長い〜い長いリストをスイスイとスクロールさせるには、横幅さえ合わせておけば、下の画像のように程よく表示されるのではと思ったりしますが…

実際はページの高さに合わせてリサイズ表示だったりします（恐ぇ〜）

※ 写真はイメージです

これを回避するには
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

といった風に、メタタグのビューポートというのを入れておけば良いのですが、知らないと泣きたくなります。

また、フォーム回りは独自のUIになってます。特にselectタグなんてダイヤルが飛び出して、これまたビックリです。
▼livedoor Reader lite — [モ]Modern Syntax 参照

また、入力フォームがページ下部にあると、せりあがったキーボードに隠されて何を入力してるか全く読めません（笑）

で、こういった諸々については邦訳された文書がAppleにて公開されてます。
▼iPhone向けWebアプリケーションとコンテンツの最適化

それをかいつまんで解説している
▼Travellers Tales : iPhone 用 Web ページおよびアプリケーションの作り方 — iPhone Development Guidelines を読む
の方もオススメします。

そのへんちゃんと読んでおけば大丈夫かというと、やはりあれはもう特殊なUIのデバイスなので、ケータイサイトをやる以上に別物な思考回路でないと駄目で、やはり自分で買って日常的に使うしかないのではないかと。

こちらでも触れたけども、タッチ操作しやすいボタンサイズとマージンの取り方があって、でも液晶解像度が72ppi等ではなく160ppiと特殊なので、パソコン上で感覚的にとらえたサイズではかなり間違ったことになりますよ。

タッチスクリーンだけにマウスオーバーやhoverの類いも無効だし、いろいろ試したところ、overflow: scroll とか iframe の類いも効かなかったような気がする（うろ覚え）。

それに拡大縮小や、縦横の表示切り換えなど、パソコンでは体験できないものが多々あるしね。体で覚えないといけないとは思ってる。

Apple iPod touch 16GB

投稿者 愛場大介（Daisuke AIBA / Jetdaisuke） : 2007年9月30日 03:15