MTAppjQuery でPCとスマホで処理を分けるには

MTAppjQuery で PC とスマホ(スマートフォンオプション)で処理を分ける方法をご紹介します。

この記事は弊社 bit part 合同会社が提供している Movable Type プラグイン「MTAppjQuery」の利用を前提としております。MTAppjQuery って何?という方は弊社の「MTAppjQuery」の製品ページをご覧ください。

MTAppjQuery は PC ブラウザでの管理画面のカスタマイズを前提として開発されていますが、user.js で設定した内容はスマートフォン(スマートフォンオプション)でもそのまま実行されます。

これらの処理を PC のみ、スマホのみ、といった具合に限定することが可能です。

Movable Type では、スマホで管理画面にアクセスするとスマートフォンオプションが自動的に適用され、 body に下記のような class が付きます。

device-smartphone device-iphone device-mobile-safari device-webkit device-ios

このクラスを利用して、user.js の中で下記のようにすれば、PCとスマホの処理を簡単に分岐することができます。

if ($('body').hasClass('device-smartphone')) {
 alert('スマホです');
} else {
 alert('スマホではありません');
}

ここでは単純に device-smartphone クラスで分岐していますが、環境によって device-iosdevice-android といったクラスも付きますので、それらを使ってより詳細に分岐することも可能です。

どのようなクラスが付くか、ブラウザの開発者ツールなどを使ってご確認ください。

Published 2016-03-01
Updated 2019-06-25

「MTAppjQuery」カテゴリの記事一覧