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 になってしまう可能性があります。
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理
- jQuery でコンボボックスの選択されたオプションのテキストを取得する場合、optgroup を使っている場合は子孫選択でないと取得されないというお話 / find(子孫) と children(直..