2014/02/22 (更新日: 2016/12/24)

【コピペで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]

PROGRAMMING