スマホサイトの判別

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 <hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function isUserAgentSP() {
    return ((navigator.userAgent.indexOf('iPhone') > 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を使った方がかっこいいかとは思います。
Cloud9 を起動する -初心者編-
gcloud で GCEインスタンスを起動してみる
AWS CLI と jq でインスタンス一覧を整形して表示
React と Laravel7 のプロジェクトを作成する
Homebrewインストール-2020年版
3直線で囲まれた範囲塗りつぶし
PuLP で線形最適化問題を解く
カスタムのペジネーションを作る
node-sass を使って sass をコンパイルする
Log ファサードでSQLログを分離して書き出す
いちから始める Docker - 複数のコンテナを使う - (2020年)
いちから始める Docker - docker-compose を使う - (2020年)
AWS ECR を使ってみる
Laravel7 でマルチ認証
Mac に AWS Client を設定する
Laravel 7 リリース
v-html でHTML表示する
Laravel で Vue コンポーネントを使う
Laravel で Nuxt.js を使ってみる(Docker環境)
いちから始める Docker -コンテナをビルド- (2020年)
いちから始める Docker -起動してみる- (2020年)
Mac で MySQL(8系)
composer で vendor がインストールできない
Eloquent の日付を Carbon で扱う
webpack 4 入門(npm編)
[Mac]容量を減らす
DIコンテナはじめ
freee SDKを Laravel で使ってみる
freee API を使ってみる
Segueを利用しない画面遷移
Xcode11.3 で XVim2 を利用する
Codable で JSONを読み込み
Webpack入門(yarn編)
MacからLaradock PostgreSQLで接続エラー
Dockerで不要なコンテナ・イメージを削除
Mac で Laradock の構築
Composer インストール
yarn インストール&プロジェクト作成
Laravel 6.x 構築(Homestead編)
nvm インストール
npm install が Mac でエラー
HTMLタグでカーソルが同時処理(ミラーリング)されてしまう
DI(依存性注入)
[Ubuntu]Let's Encryptで無料の証明書を利用する
[Apache]Apache2.4のアクセス制限が変更
[Ubuntu]rootのログインとsudo権限追加
タミヤ マイコンロボット工作セットをMacに接続してみた
pgAdimn4 でブラウザで開けなくなる
Java8 を HomebrewとjEnvで構築
Android Studio環境構築 2019