menu
スポンサーリンク

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とかプラグインとかは他にもあったのですが、もっともプリミティブで応用が利く感じがしたので・・。

連絡先など

MAIL mailmedian.weblike.jp
Skype median-weblike
所在地 東京都町田市

スポンサーリンク
スポンサーリンク

blog

プラットフォーム API 言語