レスポンシブデザイン・コーデイングTIPS(1)UAによるCSSの切り替え

レスポンシブデザインのサイトをコーディングする際のポイントをご紹介していきます。
第1回は、意外と落とし穴になりがちな、CSSの振分方法です。

「レスポンシブデザイン」という言葉が随分と定着しました。
ユーザー環境に応じて自動的に最適化されるデザイン、というような意味ですが、大きな焦点となるのは、ワンソースでPCとスマートフォンの両方に対応する、という点でしょう。

以前の記事で、メディアクエリを用いたCSSの振分方法をご紹介しました。

<link media="only screen and (max-device-width:639px)" href="スマートフォン用のCSS" type="text/css" rel="stylesheet"/>
<link media="screen and (min-device-width:640px)" href="PC用のCSS" type="text/css" rel="stylesheet"/>
<!--[if IE ]><link href="PC用のCSS" type="text/css" rel="stylesheet"/><![endif]-->

しかし、この方法では、一部Android端末で不具合が生じる場合があります。

初回アクセスの時だけ、なぜかPC用のCSSが読み込まれてしまう、というものです。
リロードしたり、他のページに遷移すると直ります。
原因は現在究明中ですが、いずれにせよ、メディアクエリを用いた方法は不確実性が残ります。

また、上記の例では、device-widthの閾値を、タブレットの短辺下限の640としていますが、今後、長辺640px(解像度ではなく、device metrix)を超える端末が出て来ないとも限りません。

そこで、以下のように、JavaScriptによってUAを判別し、スタイルシートを当て分ける方法が良いでしょう。

<script>
(function(){
var _UA = navigator.userAgent;
if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) {
document.write('<link href="./common/sp/common.css" type="text/css" rel="stylesheet"/>');
}else{
document.write('<link href="./common/pc/common.css" type="text/css" rel="stylesheet"/>');
}
})();
</script>

iPad を除外したいのであれば、if 文を以下のようにします。

if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) || navigator.userAgent.indexOf('Android') > 0)

JSもPCとスマートフォンで処理を変える場合は、CSSとJSの分岐条件が相違しないよう注意しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です