Written by Manabu Bannai

【コピペでOK】スマホとPCのデバイスごと条件分岐するスクリプトまとめ

PROGRAMMING

スマホと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'): ?>
// スマホでの処理

<?php endif; ?>
// PCでの処理

スマホと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]

人気記事:Web制作の独学方法をガッツリまとめました。

» 【独学でWeb制作マスター】勉強方法のまとめ【初心者向け】

おすすめ:Webで稼ぎたいなら、Webマーケティングを学びましょう。ノウハウまとめました。

» 【超初心者向け】Web集客の基礎から応用までガッツリまとめました。