What is the best way to detect a mobile device in jQuery? 結局 jQuery に特化した回答は無く、但し何通りもの回答がたくさんよせられていました。その中でもよさげなのが 3つほどありますのでご紹介します。 userAgent を使ったとてもシンプルなもの
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
jQuery で $ で使いたいので、左辺を jQuery にしてあります。とても簡単ですが、ちょっと拡張性が低く、メンテナンスはしづらいパターンです。 userAgent を使った拡張性の高いもの これはとても応用が利き、最も読みやすくて理解しやすくてメンテナンスが楽なものです。 Detecting Mobile Devices with JavaScript ( このリンク先のものを少し改造しています )
<script> jQuery.isMobile = { Android: function() { return navigator.userAgent.match(/Android/i) == null ? false : true; }, BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i) == null ? false : true; }, iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i) == null ? false : true; }, Opera: function() { return navigator.userAgent.match(/Opera Mini/i) == null ? false : true; }, Windows: function() { return navigator.userAgent.match(/IEMobile/i) == null ? false : true; }, any: function() { return (jQuery.isMobile.Android() || jQuery.isMobile.BlackBerry() || jQuery.isMobile.iOS() || jQuery.isMobile.Opera() || jQuery.isMobile.Windows()); } }; console.log($.isMobile.any()) </script>
CSS レスポンシブに同期するもの 個別にデバイス一覧をメンテするよりも、元々の画面の状況でチェックするようになっています。CSS を使うので、判定用の BR 要素を一つ画面の最終に置くという前提でのサンプルです。
<style> @media screen and (max-width:479px) { #lastbr { display: none; } } </style> <script> $( function() { jQuery.isMobile = false; if( $('#lastbr').css('display')=='none') { jQuery.isMobile = true; } }); </script> <br id="lastbr">
PHP 側で判定したものを使う あと、PHP のライブラリで判定したものを埋め込むという手も、開発環境によっては一番有効であろうと思われるものもあります。
<script> //set defaults var device_type = 'desktop'; </script> <?php require_once( 'Mobile_Detect.php'); $detect = new Mobile_Detect(); ?> <script> device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>"; alert( device_type); </script>
userAgent を使うと、Chrome でテストしやすい 厳密に判定してしまうと、その環境でしかテストできなくなるので、あまりお勧めではありません。例で言うと、スマホデバイスでしか判定できないタッチイベントの有無で判定しているものもありました。
function isMobile() { try{ document.createEvent("TouchEvent"); return true; } catch(e){ return false; } }
それに、これだと将来的には常に true になってしまう可能性があります。