PCとスマホ両方に対応したサイトを構築するにあたって、
- レスポンシブで対応する(読み込むファイルを分ける)
- PC用・スマホ用でページ(URL)を分ける
- PC用・スマホ用で読み込むソースを分ける(同じファイル内で)
- PCではあるけど、スマホにはないページがある(またはその逆)
のような場合がでてくる。
アクセスされたくないページにアクセスされてしまっても、正しいページに誘導してあげることが必要になる。
上記の場合がメインの内容です。
metaタグによるリダイレクト
<meta http-equiv="refresh" content="秒数;URL=URL">
URLは相対パスでも絶対パスでも可能
ex.5秒後に指定したURLにリダイレクトさせる場合
<meta http-equiv="refresh" content="5;URL=/sp/index.html">
JavaScriptによるリダイレクト
location.href="URL";
URLは相対パスでも絶対パスでも可能
秒数を指定する場合
setTimeout("redirect()", 5);
function redirect(){
location.href='/sp/index.html';
}
デバイスごとに切り替える場合
var ua = navigator.userAgent;
var redirectPass = '/sp/index.html';
if(ua.search(/iPhone/) != -1 || ua.search(/iPad/) != -1 || ua.search(/iPod/) != -1 || ua.search(/Android/) != -1){
location.href = redirectPass;
}
パラメーターなどをつけてリダイレクトする場合
var url = document.URL;
if(url.match(/separate/)){
if(url.match(/\?/)){
location.href = url + "&device=sp"
}else{
location.href = url + "?device=sp"
}
}
.htaccessによるリダイレクト(同じホストの場合)
.htaccess
RewriteEngine On
RewriteBase /
RewriteRule ^$ /sp/ [R=301,L]
- ディレクトリ単位でリダイレクトの設定が可能
- サブディレクトリもそのままの階層のままリダイレクトが行われる
リダイレクトステータス
301
- 恒久的なリダイレクト
- 元に戻すことが無い場合に利用する
- ブラウザが記憶をする為、htaccessの記述を無くしてもリダイレクトし続ける場合がある
302
- 一時的なリダイレクトです。
- メンテナンス中など、一時的な対処に使う
PHPによるリダイレクト
header('location: /sp/index.html');
exit();