【JS】モバイルブラウザか判別する「mobile-detect.js」

mobile-detect.js

mobile-detect.jsは、ユーザーが使っているブラウザがモバイルブラウザかどうかを判定するオープンソースライブラリです。

リッチなサイトではメインビジュアル等に動画を設置することがありますが、モバイル端末では通信速度や端末のスペックが十分でない場合も多く、また動画の自動再生（<video>要素のautoplay属性）も不可能だったり制限したいときがあります。

最近のモバイル製品はパソコン並みに画面解像度が高かったりすので、メディアクエリでは対応ができません。このライブラリを使用すれば、画面解像度が大きくてもモバイルブラウザを判別できるため、モバイルブラウザからアクセスだった場合、動画は非表示にして写真を替わりに表示するなどの制御ができます。

ダウンロードページ

Link

Mobile-Detect.js | Device Detection (phone, Tablet, Desktop, Mobile Grade, Os, Versions)

http://hgoebl.github.io/mobile-detect.js/

使い方

ライブラリの読込

Zipをダウンロードして展開。必要なのはmobile-detect.min.jsだけ。以下のようにHTMLで読み込みます。

<script src="js/mobile-detect.min.js"></script>
CDNから読み込みたいとき

Link

Mobile-Detect Cdn By Jsdelivr - A Cdn For Npm And Github

https://www.jsdelivr.com/package/npm/mobile-detect
Link

Mobile-Detect - Libraries - Cdnjs - The #1 Free And Open Source Cdn Built To Make Life Easier For Developers

https://cdnjs.com/libraries/mobile-detect

判別で表示を切り替えたいHTML

仮に以下のようなメインビジュアルを表示するHTMLソースがあったとします。ここのMP4動画をmobile-detect.jsでモバイルブラウザを判別し、CSSを書き換えます。

<div class="top__bg">
   <video autoplay muted loop class="top__video">
       <source src="video/top-video.mp4" type="video/mp4">
   </video>
</div>

判別するJavascript

モバイルブラウザの場合はdisplay: hidden;で非表示にして、JPEG画像をに差し替えて表示する例。

//モバイルブラウザならtrue、それ以外ならfalse
const isMobile = !!new MobileDetect(window.navigator.userAgent).mobile();

if (isMobile) {
  //モバイルブラウザの場合は画像を表示
  $('.top__bg').css({
    'background-image': 'url(video/top-video-still.jpg)',
  });
} else {
  //モバイルブラウザではない場合、動画を表示
  $('.top__video').css({ display: 'block' });
}

!!は否定（!）の否定を行っています。MobileDetectのmobile()は、モバイル端末の場合は機種の種類（iPhoneやSonyなど）、そうでない場合はnullが戻り値となります。そのため、否定の否定を演算することで、isMobileにはtrueかfalseが入るようにmobile()の戻り値を変換しています。

公式サイトでも使用方法あり

Link

Github - Hgoebl/Mobile-Detect.js: Device Detection (phone, Tablet, Desktop, Mobile Grade, Os, Versions)

https://github.com/hgoebl/mobile-detect.js#id=user-content-usage

PAGETOP