ipad用ホームページに適したCSSを作る前に・・・

ipad2が発売されて、半月が経とうとしてます。初代ipadに迫る勢いで売れているようですね。
ipadなどのタブレットPCのさらなる普及のため、タブレットPCやスマートフォンでもきちんと見ることが出来るホームページが地方でも求められています。
最近作らせていただいたホームページでも、一部表示がおかしくなっていたところがあったので、対策を調べていました。
ipadで読み込んだ際に、専用のCSSを反映させる方法はありました。
下の記事などが参考になります。
iPad対応のWebを考えてiPad用のCSSを追加する
【CSS】iPadだけにCSSを適用する方法
iPadに最適化したサイトがつくれるかもしれない5つの方法(基本編)
しかし、今回は表示が崩れていたのがほんの一部だったので、専用のCSSを作るほどではありませんでした。なので、ipad、ipad2で使われているsafariブラウザでのみ反映するハックを探してみました。
ipadのsafariはバージョンが確かめられませんが、最新版は5.0.5のようです。
safari5のハックは見つからなかったので、Documenting the Hacks: CSS Browser Targetingの記事などを参考に、safari3のハックを試してみました。
body:first-of-type #selector {property:value;}
結果、うまく表示されるようになりました。
これからは、タブレットPCとスマートフォンでも同じように表示されるようなデザインにしていく必要がありますね。

コメント

タイトルとURLをコピーしました