2014/05/16

デバイスサイズやユーザーエージェントによってCSSを切り替える3つの方法

デバイスサイズやユーザーエージェントによってCSSを切り替える3つの方法

最近では片手でギリギリ持てる大きなサイズのスマホや、従来のものより小型化したタブレット端末等、多種多様なデバイスが発売されています。

多様なデバイスサイズに対応するために、レスポンシブwebデザインを検討する機会も増えてきているかと思います。
そこで、今回はCSS、JavaScript、PHPの3つのアプローチでデバイスを判別してCSSを切り替える方法をご紹介します。

以前、『スマートフォンからのアクセスでCSSを切り替える方法。レスポンシブwebデザインの作り方。』で紹介したCSS3のメディアクエリ以外にも方法がありますので、ぜひ覚えておきましょう。

目次

1.CSSで切り替える方法

CSSでの切り替えは以前ご紹介したCSS3のメディアクエリの他に、<link>タグで記述する方法もあります。

サンプル

<!-- デバイスサイズ640px以下 -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:640px)" href="css/smartphone.css"/>

<!-- デバイスサイズ641px以上 -->
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:641px)" href="css/pc.css" />

デバイスの横幅が640px以下の場合、smartphone.cssを読み込み、641px以上の場合にはpc.cssを読み込むようになります。

こちらは横幅のサイズで判別しているため、例えばブラウザを縮小していった場合でも適応されます。

2.JavaScriptで切り替える方法

JavaScriptでの切替方法です。

サンプル

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
	document.write('<link rel="stylesheet" type="text/css" href="css/smartphone.css">');
}else {
        document.write('<link rel="stylesheet" type="text/css" href="css/pc.css">');
    }
</script>

こちらはデバイスのサイズではなく、ユーザーエージェントによる判別でCSSを切り替えます。iPhoneやiPad、Android端末からのアクセスでsmartphone.cssを読み込み、それ以外の場合はpc.cssを読み込みます。

3.PHPで切り替える方法

PHPでの切り替え方法です。

<?php
  $ua=$_SERVER['HTTP_USER_AGENT'];
  $browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
    if ($browser == true){
    $browser = 'sp';
  }
?>
<?php if($browser == 'sp'){ ?>
    <link rel="stylesheet" type="text/css" href="css/smartphone.css"/>
<?php }else{ ?>
    <link rel="stylesheet" type="text/css" href="css/pc.css" />
<?php } ?>

一番最初に記述するようにして下さい。
こちらはJavaScriptでの切り替えと同様、ユーザーエージェントでの判別でCSSを切り替えます。ただPHPでの処理なので外部からは処理内容が見えないようになっています。ソースコードを見られたくない場合などはPHPでの切替方法が良いと思います。

まとめ

今回ご紹介した以外には、単一URLではなくなりますが、.htaccessを利用してスマホ専用サイトにリダイレクトする方法もあります。
リダイレクトだけじゃない!スマートフォンサイトを作ったら設定するべき3つのこと

これからさらにいろいろなデバイスが登場してきますし、まったく新しい規格のものが普及するかもしれません。機会損失を可能な限り減らすためにも、ぜひ今回の方法でレスポンシブwebデザインを検討してみて下さい。