トップページ > IT, Internet, iPhone・iPad・iPod > Webの開発者やデザイナーはiPod touch買わなきゃダメよね
カスタム検索

Webの開発者やデザイナーはiPod touch買わなきゃダメよね

MacでのSafariとは挙動が違うのだよ挙動が



Clip to Evernote


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

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

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

実際はページの高さに合わせてリサイズ表示だったりします(恐ぇ〜)
poxt
※ 写真はイメージです

これを回避するには
<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
Apple iPod touch 16GB



Clip to Evernote



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

コメント:

Related Posts Plugin for WordPress, Blogger...

ジェット☆ダイスケ

ジェット☆ダイスケ
愛場大介ジェット☆ダイスケ
昭和生まれの古い男がこのブログを地味に更新しつづけております。趣味はブログです。 ツイッターIDは @jetdaisukeです。 そしてGoogle Plusはこちらにどうぞ。また、YouTubeのチャンネル登録はこちらからできます。

なんかいいアイテム


ナノ一眼 PENTAX Q の実力
iPhoneとも戦えるカメラ、ナノ一眼 PENTAX Q を購入しました
シャッター切るたび画調が変わる PENTAX Q のランダムなクロスプロセスが楽し過ぎるのだ
PENTAX Q トイレンズ比較 魚眼/広角/望遠
ペンタックスQのバッテリは、フジフイルム、コダックとも共通
ナノ一眼PENTAX Qをもう一台導入しまして
ナノ一眼 PENTAX Q でも星を撮影できた
PENTAX Q 動画モードについての感想

世界最小15倍ズームレンズB008とキヤノンEOS 60Dで大自然を撮ってみよう!
TAMRON 18-270mmF3.5-6.3 Di2 VC PZD B008
タムロン 18-270mmF3.5-6.3 Di2 VC PZD B008

バリアングル液晶でビデオ撮影も快適なデジイチ
Canon デジタル一眼レフカメラ EOS 60D
EOS 60D
レビュー記事:
EOS 60Dのバリアングル液晶はやっぱり動画撮りやすいです
キヤノン 一眼レフ EOS 60D を購入してみた

[地球圏最強の標準レンズ]
シグマ30mm F1.4レンズは企業プロモーションビデオにも使える優れもの
SIGMA 30mm F1.4 EX DC

Canon EFレンズ 50mm F1.8 II 最安の単焦点レンズを試す
Canon EFレンズ 50mm F1.8 II
[最安の超広角レンズ買うた]
タムロン超広角ズームレンズ TAMRON SP AF10-24mm F/3.5-4.5 Di II
TAMRON AF10-24mm F/3.5-4.5 DiIILD Aspherical
TAMRON AF10-24mm F/3.5-4.5 DiIILD

【EOS 関連記事】
キヤノンEOS Kiss X3関連で購入したアイテムまとめ1 純正品編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ2 お役立ち編
キヤノンEOS Kiss X3関連で購入したアイテムまとめ3 交換レンズ編

最近のエントリー

AMN