PCとスマホで別々のスタイルシートを読み込む方法

PCとスマホで別々のスタイルシートを読み込む方法

PCとスマホで別々のスタイルシートを読み込む方法

PCからアクセスした場合とスマホからアクセスした場合で、読み込むスタイルシートを切り替える方法をご紹介いたします。

PCとスマホで別々のスタイルシートを読み込む方法

スタイルシートを読み込むlink要素のmedia属性にmax-device-widthmin-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属性で横幅を指定するやり方が一番簡単ですね。参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

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