背景

モバイルデバイスの判定には長らくUser-Agent文字列が用いられてきましたが、主要なブラウザではフィンガープリントへの悪用対策などの理由によりUser-Agent文字列の情報量を減らす方針を発表しています。
これに伴いUser-Agent文字列の情報のみに頼ったモバイルデバイス判定はChromeなど一部ブラウザで将来的に動作しなくなる予定となっています。
本記事のコードを使うことによりこの問題に対応したモバイルデバイス判定が可能になります。

作り方

カスタムJavaScript変数「cjs - isMobile」を作成し、以下コードを貼り付けて保存します。この変数設定はページを閲覧しているデバイスがモバイルと判定できるときのみ真偽値でtrueを返し、そうでないときfalseを返します。

function(){
  var regex = /iphone;|(android|nokia|blackberry|bb10;).+mobile|android.+fennec|opera.+mobi|windows phone|symbianos/i;
  var isMobileByUa = regex.test(navigator.userAgent);;
  var isMobileByClientHint = navigator.userAgentData && navigator.userAgentData.mobile;
  return isMobileByClientHint || isMobileByUa;
}

活用例

デバイスタイプを返す変数設定を作る

ルックアップテーブルを使う場合

エンジニア以外にも分かりやすくしたいときにオススメの方法です。

※ cjs - isMobile部分はこの記事で作成した変数を選択

カスタムJavaScriptを使う場合

「タブレットデバイスも判定したい」「公式アプリ判定も入れたい」等、応用・改造して使う可能性がある場合、自由に書き換えられるカスタムJavaScript変数で作成すると便利です。

function(){
  var isMobile = {{cjs - isMobile}};
  return isMobile ? 'mobile' : 'desktop';
}

※ {{cjs - isMobile}}部分はこの記事で作成した変数名に置き換えて使う

タグをモバイルデバイスで発火させないようにする

以下のようなカスタムイベントトリガーを作成して、目的のタグ設定の例外トリガーとして設定します。

イベント名 : .*
正規表現一致を使用 : チェック
一部のカスタムイベント : チェック
- [今回作ったカスタムJavaScript変数] 等しい true

タグをモバイルデバイス以外で発火させないようにする

以下のようなカスタムイベントトリガーを作成して、目的のタグ設定の例外トリガーとして設定します。

イベント名 : .*
正規表現一致を使用 : チェック
一部のカスタムイベント : チェック
- [今回作ったカスタムJavaScript変数] 等しくない true

User-Agentの縮小について参考になる記事