iPhone用CSSをメディアクエリで分岐する問題点

これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。

追記(2010/07/09)

本エントリーはiPhone 4の発売前に書いたものです。
iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。
参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ

これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。

<link media="only screen and (max-device-width:480px)" rel="stylesheet" type="text/css" href="css/iphone.css" />
<link media="screen and (min-device-width:481px)" rel="stylesheet" type="text/css" href="css/import.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/import.css" />
<![endif]-->

これはiPhoneの画面サイズが320×480だった為、画面サイズが480px以内の場合はiphone.cssを読み込むとしていた為です。

しかし、iPhone 4の画面サイズは960×640ピクセル。これまでの手法が通用しなくなりました。

そもそも画面サイズで特定デバイスかどうかを判断するというのはメディアクエリの本質とは異なりハックに近い手法だったと言わざるえません。

iPhone 4のブラウザの仕様などがわからない為、これまでと同じスタイルシートを適用してよいかなどの問題もありますが、やはり特定デバイスに向けてのスタイルシートの切り替えは素直にユーザーエージェントで行うのがよいでしょう。
たとえば次のような.htaccessを利用したスタイルシートの切り替えです。

RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^css/import.css$ /css/iphone.css [R]

ユーザーエージェントによる切り替えも問題ないわけではありません。例えばNintendo DSブラウザの場合、Nintendo DS /DS LiteとNintend DSiで全く異なるユーザーエージェントが適用されています。

Nintendo DS /DS Liteのユーザーエージェント
Mozilla/4.0 (compatible; MSIE 6.0; Nitro) Opera 8.50[ja]

Nintend DSiのユーザーエージェント
Opera/9.50 (Nintendo DSi; Opera/446; U; ja)

Nintendo DS /DS Liteでは共通のキーワードとして「Nitro」、Nintend DSiでは「Nintendo DSi」が利用されています。

iPhone 4 のユーザーエージェントはわかりませんが、もしかしたら「iPhone」のキーワードを含んでいないかもしれません。（追記：@tt__からiPhone 4 のユーザーエージェントの情報を教えてもらいました。）

なにがベストプラクティクスかというのはわかりませんが、目的のデバイスがバージョンアップした場合などに、すぐに対応できる指定をしたほうがよいでしょう。（個人的にはユーザーエージェントによる切り替えがマストかなと思っています。）

現場のプロから学ぶXHTML+CSS
現場のプロから学ぶXHTML+CSS

スポンサードリンク

«jQueryを利用してDeliciousのブックマーク数を表示する | メイン | MT5でカスタムフィールドの表示順をベースネーム順に変更するプラグイン「CustomSort5」»