レスポンシブやRewriteEngineなどを使用していない、
静的な個別スマートフォンサイトを制作した際に、
PC/SPデバイス毎で、相互切り替えを実装します。
例えば、PCサイトのアドレスが、
http://example.com/
SPサイトのアドレスが、/sp/ となっている場合です。
http://example.com/sp/
ページ遷移した時や2回目のアクセスの対応として、
localstorageを使用したフラグ判定をしております。
相互にページがない場合などで、切り替えを行いたくない時は、
スクリプトを読み込みしなければ、ページ遷移することはありません。
PCページへ読み込むスクリプト
<script>
$(document).ready(function(){
var storage = 'pc';
//Current URL 書き換え(spディレクトリをドメインの後ろに追加)
var host = $(location).attr('hostname');
var current_url = $(location).attr('href').replace(new RegExp(host, 'g'), host + '/sp');
try{
var userAgent = window.navigator.userAgent.toLowerCase();
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
//localStorageデータ取得
storage = window.localStorage.getItem("deviceMode");
if(storage == null){
//スマホからPCページを見たときに、SP版へ遷移設定
storage = 'sp';
}
}
} catch(e) {}
if (storage == 'sp') {
window.location.href = current_url;
}
//SPページへの誘導バナーがある場合、クリックで切り替え遷移
if($('#sp-link').length > 0){
$('#sp-link').click(function(){
try{
window.localStorage.removeItem("deviceMode");
window.localStorage.setItem("deviceMode", 'sp');
} catch(e) {}
window.location.href = current_url;
});
}
});
</script>スマホページへ読み込むスクリプト
<script>
$(document).ready(function(){
var storage = 'sp';
//Current URL 書き換え(spディレクトリを削除)
var current_url = $(location).attr('href').replace(/\/sp\//g, '/');
var userAgent = window.navigator.userAgent.toLowerCase();
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)){
try{
//localStorageデータ取得
storage = window.localStorage.getItem("deviceMode");
} catch(e) {}
} else {
//PCからのアクセス
storage = 'pc';
}
if (storage == 'pc') {
window.location.href = current_url;
}
//PCへのリンククリックで、切り替え遷移
$('#pc-link').click(function(){
try{
window.localStorage.removeItem("deviceMode");
window.localStorage.setItem("deviceMode", 'pc');
} catch(e) {}
window.location.href = current_url;
});
});
</script>


コメント