iphone、android、ipadなどのデバイス別CSS振り分け
2014年1月22日
PCのブラウザ別に別々のCSSを適用させることをCSSハックといいますが、最近のブラウザは優秀なのでほとんどハック用のCSSコードを書かなくても良くなりました。
一時期はIE6、IE7あたりが特にひどい表示バグがあったので困ったものだったのですが・・。
ただ、最近はデバイスが多様化してきており、デバイスごとに微妙に表示が違っていたりすることが多くなってきたように思います。
PC、Mac、android（タブレットも含む）、ipad、iphone、色々なデバイスからネットアクセスがあります。
ただ、なぜかこの中で微妙に他と違った表示をする（年に2～3回くらい）ことが多いのが、iphoneです。
他のデバイスではちゃんと表示されているのに、iphoneだけ微妙にずれていたりします。
基本的なHTMLレンダリングエンジンはどのデバイスも（ガラケー以外）いくつかありますが、ほぼ同じはずなのに、なぜかiphoneだけずれてしまうことがあります。
原因は今のところはっきり分かりません。推測するに、javascriptやjqueryとかの読み込む順序、キャッシュを取得しにいく順序、それらから影響されたCSSの読み込み順序などからレイアウト崩れに影響するような気がします。
とにかく、デバイス別に別々のCSSを適用させる必要が出てくることになったのですが、下記URLのjavascriptがとても有効だったので備忘録として書いておきます。
http://qiita.com/tabo_purify/items/e0210a1df321e9091a59
似たような目的のJQueryとかプラグインとかは他にもあったのですが、もっともプリミティブで応用が利く感じがしたので・・。
median.weblike.jp
