会社でスマホサイトの切り分けどうやるの?って聞かれたのでちょっと実装してみる。
var sp_url = 'スマホのURL';
var default_msg = "このサイトはスマートフォン対応です。【OK】でスマートフォンサイト、【キャンセル】でPCサイトを表示します。";
var is_sp = isUserAgentSP();
if (is_sp) {
var cookie_mode = $.cookie('mode');
if (!cookie_mode) {
if (confirm(default_msg)) {
$.cookie('mode', 'sp');
location.href = sp_url;
} else {
$.cookie('mode', 'pc');
}
} else {
var mode = getUrlVars()["mode"];
if (mode == 'sp') {
$.cookie('mode', 'sp');
location.href = sp_url;
}
}
} else {
$('.mode_url').css('display', 'none');
}
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i 0
&& navigator.userAgent.indexOf('iPad') == -1)
|| navigator.userAgent.indexOf('iPod') > 0
|| navigator.userAgent.indexOf('Android') > 0);
}
(1) UserAgentの取得 (2) URLのパラメータを解析してもーで「mode=sp」を取得 (3) cookie で保存して判別(この場合、mode に sp を保存) (4) PC接続の場合、 class="mode_url" の要素を display:none に変更
UserAgent(iPhone, iPad, iPod, Android)とCookieでやってるので完璧ではないです。 スマホなので、フラグ保存はWebDataStrageを使った方がかっこいいかとは思います。