スマホサイトの判別

2012/07/13

会社でスマホサイトの切り分けどうやるの?って聞かれたのでちょっと実装してみる。


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を使った方がかっこいいかとは思います。