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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。