【コピペでOK】スマホとPCのデバイスごと条件分岐するスクリプトまとめ
スマホとPCのデバイスごとにリダイレクトするスクリプトまとめです。
スマホファーストの時代にはかかすことができないスクリプトです。
スマホとPCのデバイスごとに『CSS』で条件分岐するスクリプト
※幅によって動作が変わります。以下の場合、最大幅が400pxの場合は「sp.css」を参照します。
// スマホ用のCSS
<link rel="stylesheet"type="text/css"media="only screen and (max-device-width:400px)"href="./layout/sp.css"/>
// PC用のCSS
<link rel="stylesheet"type="text/css"media="screen and (min-device-width:401px)"href="./layout/pc.css"/>
スマホとPCのデバイスごとに『PHP』で条件分岐するスクリプト
<?php
$ua=$_SERVER['HTTP_USER_AGENT'];
$browser=
((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
?>
<?php
if($browser=='sp') { ?>
<!-- sp -->
<img src="images/01_sp.jpg" alt="" class="img-responsive">
<?php } else { ?>
<!-- pc -->
<video src="movie/top.mp4" autoplay loop>
<img src="images/mov.jpg" alt="Placeholder">
</video>
<?php } ?>
スマホとPCのデバイスごとに『JavaScript』で条件分岐するスクリプト:その1
スマホからのアクセスをスマホサイトに流すスクリプトです。
<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) {
// スマホ用のページにリダイレクトする
location.href = '/sp/';
}
</script>
スマホとPCのデバイスごとに『JavaScript』で条件分岐するスクリプト:その2
PCからのアクセスをPCサイトに流すスクリプトです。
<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) {
}else{
// PC用のページにリダイレクトする
location.href = 'hugehoge.com/';
}
</script>
スマホとPCのデバイスごとに『.htaccess』で条件分岐するスクリプト
RewriteEngine On # Set enviroment value by user-agent SetEnvIf User-Agent "iPhone" UA=sp SetEnvIf User-Agent "iPod" UA=sp SetEnvIf User-Agent "Android" UA=sp # Redirect if smart phone RewriteCond %{REQUEST_URI} !^/sp.* RewriteCond %{ENV:UA} ^sp$ RewriteRule ^(.*)$ /sp/ [R,L]