【JS】モバイルブラウザか判別する「mobile-detect.js」
目次
mobile-detect.js
mobile-detect.jsは、ユーザーが使っているブラウザがモバイルブラウザかどうかを判定するオープンソースライブラリです。
リッチなサイトではメインビジュアル等に動画を設置することがありますが、モバイル端末では通信速度や端末のスペックが十分でない場合も多く、また動画の自動再生(<video>
要素のautoplay
属性)も不可能だったり制限したいときがあります。
最近のモバイル製品はパソコン並みに画面解像度が高かったりすので、メディアクエリでは対応ができません。このライブラリを使用すれば、画面解像度が大きくてもモバイルブラウザを判別できるため、モバイルブラウザからアクセスだった場合、動画は非表示にして写真を替わりに表示するなどの制御ができます。
ダウンロードページ
使い方
ライブラリの読込
Zipをダウンロードして展開。必要なのはmobile-detect.min.jsだけ。以下のようにHTMLで読み込みます。
<script src="js/mobile-detect.min.js"></script>
CDNから読み込みたいとき
判別で表示を切り替えたい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()
の戻り値を変換しています。
公式サイトでも使用方法あり