【コピペで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]
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。