iPhone 向けCSSの記述ポイントなど - Office L テクニカルノート

先日 iPhone 3GS を買ったので、いろいろなサイトを見ているのですが、対応していないサイトが多くて辟易しています。先代の iPhone や iPod Touch が出た頃から考えれば、ずいぶん経過しているはずなのですが。。。
一日も早くもっともっと対応サイトが増えてくれればいいな、ということで、対応への記述ポイントなど書いてみようと思います。
もっと iPhone でストレスなくインターネットが使えますようにｗ

何はともあれ viewport

お願いだから全部のサイトに viewport つけて欲しい。
iPhone の Safari は、デフォルトで 980px をviewport として扱うため、指定のないサイトの場合、横幅を 980px だとして扱います。縮小表示されてしまうので、正直読めません。
Apple のサイトも 980px で表示されますが、そのままの状態で文字が読める人はそう多くないと思います。ダブルタップかピンチアウトして拡大しないと読めないのは、よく使うサイトの場合、ストレスにしかなりません。
とりあえず何か対処したいな、と思うのであれば、

<meta name="viewport" content="width=サイトの横幅" />

としてください。これだけで、横幅 800px 程度のサイトでも、ちょっとだけマシです。
できれば次項の iPhone 用CSSを書いて、iPhone 用サイトの横幅を決定して、それにあわせると素敵です。
横幅が100%になっているリキッドレイアウトなサイトの場合は、少し狭めのサイズにしてもらえると読みやすいと思います。

iPhone 用CSSを書く

方法はいくつかありますが、

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet"/>

などとして、iPhone 用の外部CSSを読み込ませてください。
これは正確にはデバイスの横幅最大値が480pxのUAにも読み込まれてしまうので、例えば横表示で480pxが出せるそのほかの携帯にも適用されてしまいますが、ひとまず置いておきましょうｗ
気になるなら JavaScriptで出し分けるなどでもいいでしょう。

電話番号対策

ぶっちゃけ余計なお世話機能だと思うのですが、iPhone は携帯電話なので、電話番号らしい数字列を見つけると、電話をかけるためのリンクに自動的に変換してくれたりします。
コレの精度がイマイチなため、西暦表示の年月日も変換してしまい、しばしば迷惑です。

<meta name="format-detection" content="telephone=no">

これを書くだけで、電話番号変換を止めてくれます。
普通の電話番号リンクはそのまま使えますので、特に問題はないはずです。

読みやすいページにするポイント

なにはともあれシリアライズ: 要は２カラムや３カラムなど必要ないので、１カラムレイアウトにしてください。３カラムの mixi とか、正直使ってられないです。もっとも、mixi の右端カラムは基本的に広告なので普段から見てないですがｗ
横幅は狭いほうが見やすい: 極端な話、320px から 500px 程度の横幅で、そのように viewport が指定されていれば、拡大しなくても文字が読みやすいです。
リンクエリアのサイズに注意: 指で操作するので、人差し指の先より小さいリンクは押しにくいです。スタイラスを使っている人はいいかもしれませんが。。。縮小表示された状態で、密集したリンクを押すのは難しいです。特にページ選択系のナビゲーションには注意が必要です。
リンクエリアの位置関係に注意: margin と padding は十分に取って下さい。特に、横方向はともかく、縦方向にリンクが並ぶと（リスト要素でリンクが並ぶと）押しそこなう率が高いです。
画像のサイズに注意: 基本的に縮小表示される運命なので、PCでは大きめに見えても、iPhone で見ると小さい！ということがよくあります。その画像がリンクだったりすると、大変扱いにくいので注意しましょう。

参考

手前味噌ですが、http://kanji.uows.jpでは、iPhone で見ても PC で見てもほとんど変わらないようにデザインしてみています。横幅が狭いだけなんですけどｗ