はてなブログを改造する際に利用するスマホの判定方法（UserAgentによる判定から画面幅による判定へ）

UserAgentによる判定から画面幅による判定へ

今までjavascript内でスマホを判定する際には下のコードのようにUserAgentを使っていました。

if ((navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0)){
 //スマホの場合の処理
}

元々いつも使っていたコードで便利だからそのまま使っていたのですが、レスポンシブ対応してあるテンプレートを使っているのに画面幅で判定していないのはおかしいとコードを眺めていてふと思ったので、画面幅の対応に変更することにしました。

画面幅の判定はやっぱりjQueryで

画面幅の判定方法ですが、このサイトの処理はほぼjQueryを使っているので、jQueryで行うことにしました。

画面幅はjQueryの場合、 $(window).width() で簡単に取得できます。

スマホには色々な画面幅があるようですが、とりあえず画面幅が480pxより小さい時はスマホだと判定します。

if ($(window).width() < 480) {
 //スマホの場合の処理
}

これで画面幅に合わせて処理を実行することができます。

※因みにはてなブログのフッター内でスマホの幅かどうか判定したい場合のコードはこんな感じです。

<script>
<!-- jQueryの読み込みを待つ処理 -->
(function (cb) {
 if (typeof jQuery !== 'undefined') {
 jQuery(function () { cb(jQuery) });
 return;
 }
 var poll = arguments.callee;
 setTimeout(function () { poll(cb) }, 50);
})

(function ($) {
 if ($(window).width() < 480) {
 //スマホの場合の処理
 }
});
</script>