まえちゃんねる ぶろぐ

Javascriptを使ってデバイス毎にCSSを読み込ませる!

2012年02月08日

120208

メディアクエリは古いブラウザ未対応!

先日とあるサイトをリニューアルしました。
画面サイズをXVGA(1024px×768px)以上に対応したのと
iPhone、Androidのスマートフォンにも最適化しました。

最初メディアクエリを使って画面サイズ480px以下のものは別CSSを読み込むような振り分けを行いました。
つまり次のようなタイプ。

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

デバイス側が480px以内の画面サイズならスマートフォン用、それ以外ならPC用のCSSを読み込ませる方法です。
ところがこのメディアクエリを使った方法では古いブラウザでは未対応!!!
IE6はまだ対応しているのですが、Firefox2やSafari1ではまるでCSSを読み込んでくれません。。(- -;)

世界的なシェアではFirefox2は「0.37%」、Safari1に至っては「0.05%以下」!
使ってる人なんていないと思っていたら、なんと周りに3人も!

Javascirptなら古いブラウザでも問題なし!

仕方ないのでJavascriptを使いユーザーエージェントからCSSの読込先を変える方法にしました。

<script type="text/javascript">
if (navigator.userAgent.indexOf(‘iPhone’) != -1 || navigator.userAgent.indexOf(‘Android’) > 0) {
document.write(‘<link rel="stylesheet" type="text/css" href="iPhone.css" media="all">’);
}
else {
document.write(‘<link rel="stylesheet" type="text/css" href="PC.css" media="all">’);
}
</script>

この方法なら、Firefox2、Safari1でもCSSを読んでくれました。
一安心 (^▽^)

ユーザーエージェントの記述を増やせば、
iPad用CSSやAndroid タブレット用CSSも作れるのではないかと思っています!



カテゴリ:Javascirpt

タグ:, , ,


RECENT POSTs

CATEGORYs

Links

my YouTube VIDEOs

AUTOHR Profile

n_skywalker

Noriaki Maehara

WEB制作のお仕事をしております。
また、YouTubeでガジェットや子供のおもちゃ等のレビュー動画をアップしております。

RSSの登録はこちらから

twitter

Facebook page

INSTAGRAM PHOTOs

my iPhone5 home screen

my iPhone5 home screen