スマホからのアクセスを判別して動作を切り替えるCSS、PHP、Javascript、.htaccess

CSSで切り替える

デバイスの幅によって動作をきりかえます。下記だと最大幅480pxの場合は「sp.css」を参照します。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px)" href="./layout/sp.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-device-width:481px)" href="./layout/pc.css" />

PHPで切り替える

ユーザーエージェントを判別してPHPで条件分岐します。

<?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'){ ?>
    <link rel="stylesheet" type="text/css" href="css/sp.css"/>
<?php }else{ ?>
    <link rel="stylesheet" type="text/css" href="css/pc.css" />
<?php } ?>

JavaScriptで切り替える

ユーザーエージェントを判別してJavaScriptで条件分岐します。

<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) {
	document.write('<link rel="stylesheet" type="text/css" href="./layout/sp.css">');
}else {
        document.write('<link rel="stylesheet" type="text/css" href="./layout/pc.css">');
    }

.htaccessで切り替える(別URLへ)

ユーザーエージェントを判別して.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]