簡単にPCかモバイルを判別できる【isMobile.js】

モバイル端末を判別する時に便利な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>

<script> 
if (isMobile.any) {
    //モバイル端末の場合の処理
} else {
    //モバイル端末以外の場合の処理
}
</script>

スマホ、タブレットに分けて判別する場合は、(isMobile.any)を以下に書き換えれば判別できます。

//モバイル端末(スマホ、タブレット)判別
isMobile.any

//スマホ判別
isMobile.phone

//タブレット判別
isMobile.tablet

//iPhone判別
isMobile.apple.phone

//iPad判別
isMobile.apple.tablet

//全てのアップル端末
isMobile.apple.device

//アンドロイド スマホ判別
isMobile.android.phone

//アンドロイド タブレット判別
isMobile.android.tablet

//全てのアンドロイド端末判別
isMobile.android.device