この記事を書いた人
ユーザーエージェントでpcサイトとスマホサイトを切り替える方法
WEB制作
すでにPCサイトが公開された状態で後でスマホサイトの作成依頼を頂くことはありませんか。
レスポンシブwebデザイン希望の場合、そもそもPCサイト作成時に、レスポンシブwebデザインのことを考えてないでデザイン・コーディングしているので考え方に無理があります。(できないことはないですが….)
後からスマサイトをレスポンシブwebデザインで作成する場合、PCサイトを手直しする必要があり工数や時間がかかり、かつ金額が増えます。
またwordpressが導入している場合プラグインでPCサイトとSPサイトを切り替えることも可能ですし、別サイトとして、SPサイトを作ることも可能ですが、面倒なことをせずに、PHP を使いユーザーエージェントでPCサイトとスマホサイトを切り替える方法をご紹介。
ユーザーエージェントとは
ユーザーエージェントとは、PC・スマートフォン・タブレットでWebサイトへのアクセスの際に使用されるプラグラムのことです。
ユーザーエージェントでサイトを切り替えることによって、メディアクエリーとは違いJsもPCサイトとスマホサイトを切り替えることが可能なメリットがあります。
使用方法
headにjsとcssを指定します。
phpを使うので、当たり前ですがhtmlでは動きません。
<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'){ ?>
<--ここにスマホサイトで使うjs・cssを指定-->
<link rel="stylesheet" type="text/css" media="all" href="../css/sp.css">
<script src="../js/sp.js"></script>
<?php }else{ ?>
<--ここにPCサイトで使うjs・cssを指定-->
<link rel="stylesheet" type="text/css" media="all" href="../css/common.css">
<script src="../js/pc.js"></script>
<?php } ?>
</head>
demo
こちらをスマホとPCで別々でアクセスして頂くと切り替わります。
まとめ
スマホからアクセスは増えています。スマホサイトの作り方は様々な方法がありますが、後からスマホサイトを作る際の一例をご紹介してみました。
とても楽な使い方になります。
参考になれば幸いです。