モバイル端末を判別する時に便利なJavascriptライブラリ【isMobile.js】の導入メモです。
基本的にはcssのメディアクエリで対応できるのですが、 モバイル端末の横向きの時にだけ処理したいことがある場合、メディアクエリだけではPCにも影響が出る為、【isMobile.js】を使った分岐をしてみます。
isMobile.jsをインストールする
isMobileのgithubでダウンロード方法が確認できます。 ターミナルで以下のコマンドを使用するか、CDNで読み込みます。
$ yarn add ismobilejs<script src="https://cdn.jsdelivr.net/npm/ismobilejs@1/dist/isMobile.min.js"></script>isMobile.jsの使い方
モバイル端末かどうかを判別する場合
<script> if (isMobile.any){" "} { //モバイル端末の場合の処理 }{" "} else{" "} { //モバイル端末以外の場合の処理 }</script>スマホ、タブレットに分けて判別する場合
スマホ、タブレットに分けて判別する場合は、(isMobile.any)を以下に書き換えれば判別できます。
//モバイル端末(スマホ、タブレット)判別isMobile.any;
//スマホ判別isMobile.phone;
//タブレット判別isMobile.tablet;iPhone、Androidなどで判別する場合
Apple端末で判別
//iPhone判別isMobile.apple.phone;
//iPad判別isMobile.apple.tablet;
//全てのアップル端末isMobile.apple.device;Andoroid端末で判別
//アンドロイド スマホ判別isMobile.android.phone;
//アンドロイド タブレット判別isMobile.android.tablet;
//全てのアンドロイド端末判別isMobile.android.device;