PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。
PCとスマホで別々のスタイルシートを読み込む方法
スタイルシートを読み込むlink要素のmedia属性にmax-device-widthやmin-device-widthを追加するだけで、簡単に読み込むスタイルシートを切り替えることができます。
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="sp.css"> <link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="pc.css">
このように記述することで、デバイスの横幅が480px以下の場合は”sp.css”、デバイスの横幅が481px以上の場合は”pc.css”が読み込まれるようになります。
横幅ではなくデバイスの種類によって読み込むスタイルシートを切り替える
上述した方法では、厳密にはPCとスマホで切り替えるのではなく、横幅によって読み込むスタイルシートを切り替えています。横幅ではなく厳密にPCとスマホで切り替えたい場合は、PHPやJavaScriptを使って端末の種類を判別します。
PHPによってスタイルシートを切り替える
PHPが使える環境であれば、HTMLの<head>～</head>内で以下のように記述します。
<?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="sp.css"/>
<?php }else{ ?>
<link rel="stylesheet" type="text/css" href="pc.css" />
<?php } ?>
JavaScriptによってスタイルシートを切り替える
PHPが使えない、もしくはPHPを使いたくない場合は、JavaScriptによって切り替えることも可能です。HTMLの<head>～</head>内で以下のように記述しましょう。
<script>
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="sp.css">');
} else {
document.write('<link rel="stylesheet" type="text/css" href="pc.css">');
}
</script>
あとがき
上述したように、PCとスマホでスタイルシートを切り替えるには色んなやり方がありますが、link要素のmedia属性で横幅を指定するやり方が一番簡単ですね。参考になれば幸いです。