読者です 読者をやめる 読者になる 読者になる

平日WEB系SE 週末時々自転車屋

WEB系の技術ネタや大好きなお酒、週末手伝う自転車屋の話などを書きます。

はてなブログを改造する際に利用するスマホの判定方法(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>