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]