iPhone向けにウェブページを最適化する。

せっかくiPhoneを買ったので、PCのウェブページを、CSSだけ振り分けてiPhone向けのページにしてみようと思ってやってたんですが。なんかスムーズにいかないです。

<link rel="stylesheet" type="text/css"  href="style.css" media="screen and (min-device-width: 481px)" />

<!-- for iPhone -->

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

<meta name="viewport" content="width=480; initial-scale=1.0; maximum-scale=0.6667; user-scalable=no"/>

<!-- for iPhone -->

上記のように書くと、画面サイズが480px以下のやつにはiphone.cssを、それ以上のやつにはstyle.cssをということになるらしいですが、なんとはなしにIEで見てみたら、CSSが完全に効いてませんでした。

ちゃんと調べてみたら、コンディショナルコメントでIE用に別でまた書かないとダメらしいです。

<!--[if IE]>

<link href="style.css" type="text/css" rel="stylesheet" />

<![endif]-->

なんでやねん。

それ以外にも、iPhoneはちょっと癖があって、フォントサイズが上手く反映されなかったり、縦で見たときと、横で見た時で、あれやこれやあったりで、最初からiPhoneも意識して、リキッドレイアウトな感じで作っておけば、フロートを崩すだけ、とかでもいけそうですが。

Web Design Inspiration for the iPhone

こういうの見てると、PHPか何かでディレクトリごと別のサイトとして作って振り分けるほうがわかりやすいというか、妥協がないかもしれないですね。画像のサイズとかもどこを基準に小さくなってるのか、よくわからないので、ボタンとか画像にしてると、小さ過ぎてクリックできひんとかなってしまいそうです。

ただの勉強不足です。

参考：
iPhone 3G DevWiki　-　画面表示関係
PCサイトをCSSだけでiPhone (iPod touch)に対応させる方法
レポート：SwapSkills 『誰でも出来るiPhoneのウェブサイト』
viewportの表示を検証してみました