モバイルデバイスを検出するための最良の方法は何ですか?

1727
superUntitled 2010-08-19 07:22.

ユーザーがjQueryでモバイルデバイスを使用しているかどうかを検出する方法はありますか?CSS@media属性に似たものはありますか?ブラウザがハンドヘルドデバイス上にある場合は、別のスクリプトを実行したいと思います。

jQuery$.browser関数は私が探しているものではありません。

30 answers

2092
sweets-BlingBling 2010-08-22 19:26.

編集者注:ユーザーエージェントの検出は、最新のWebアプリには推奨されない手法です。この事実の確認については、この回答の下のコメントを参照してください。機能検出やメディアクエリを使用して、他の回答の1つを使用することをお勧めします。


jQueryを使用する代わりに、単純なJavaScriptを使用してそれを検出できます。

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

または、両方を組み合わせて、jQueryを介してアクセスしやすくすることもできます...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

今すぐ$.browser戻ります"device"上記のすべてのデバイスに

注:jQueryv1.9.1で$.browser削除されました。ただし、jQuery移行プラグインコードを使用してこれを使用できます


より完全なバージョン:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}
566
Gonçalo Peres 2012-04-29 04:52.

私にとって小さいのは美しいので、私はこのテクニックを使用しています:

CSSファイルの場合:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

jQuery / JavaScriptファイルの場合:

$( document ).ready(function() { var is_mobile = false; if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now I can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

私の目的は、私のサイトを「モバイルフレンドリー」にすることでした。そのため、CSSメディアクエリを使用して、画面サイズに応じて要素を表示/非表示にします。

たとえば、私のモバイルバージョンでは、Facebook Like Boxをアクティブにしたくありません。これは、これらすべてのプロファイル画像などが読み込まれるためです。そして、それはモバイル訪問者にとっては良くありません。したがって、コンテナ要素を非表示にするだけでなく、jQueryコードブロック(上記)内でもこれを行います。

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

あなたはそれが実際に動作しているのを見ることができます http://lisboaautentica.com

私はまだモバイル版に取り組んでいるので、これを書いている時点ではまだ期待どおりに見えていません。

dekin88による更新

メディアを検出するためのJavaScriptAPIが組み込まれています。上記のソリューションを使用するのではなく、単に以下を使用してください。

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

ブラウザのサポート: http://caniuse.com/#feat=matchmedia

この方法の利点は、シンプルで短いだけでなく、DOMにダミー要素を追加することなく、必要に応じてスマートフォンやタブレットなどのさまざまなデバイスを条件付きで個別にターゲットにできることです。

250
QuasarDonkey 2014-07-07 11:46.

Mozillaによると-ユーザーエージェントを使用したブラウザの検出:

要約すると、モバイルデバイスを検出するには、ユーザーエージェントの任意の場所で文字列「Mobi」を探すことをお勧めします。

このような:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

これは、モバイルMozilla、Safari、IE、Opera、Chromeなどを含むすべての一般的なモバイルブラウザユーザーエージェントと一致します。

Android用アップデート

タブレット用のChromeユーザーエージェント文字列には「Mobi」が含まれていないためAndroid、EricLはユーザーエージェントとしてもテストすることをお勧めします(ただし、電話バージョンには含まれています)。

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}
92
sequielo 2013-11-30 11:14.

シンプルで効果的なワンライナー:

function isMobile() { return ('ontouchstart' in document.documentElement); }

ただし、上記のコードでは、タッチスクリーンを備えたラップトップの場合は考慮されていません。したがって、@ Julianソリューションに基づいて、この2番目のバージョンを提供します。

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
82
Bart 2010-08-19 08:21.

モバイルデバイスを検出したいということであなたがしていることは、「ブラウザスニッフィング」の概念IMOに少し近づきすぎています。いくつかの機能検出を行う方がはるかに良いでしょう。のような図書館http://www.modernizr.com/ それを助けることができます。

たとえば、モバイルと非モバイルの境界線はどこにありますか?毎日ますますぼやけてきます。

68
Ender 2010-08-19 08:02.

それはjQueryではありませんが、私はこれを見つけました: http://detectmobilebrowser.com/

これは、JavaScriptを含むいくつかの言語でモバイルブラウザを検出するためのスクリプトを提供します。それはあなたが探しているものであなたを助けるかもしれません。

ただし、jQueryを使用しているため、jQuery.supportコレクションに注意する必要がある場合があります。これは、現在のブラウザの機能を検出するためのプロパティのコレクションです。ドキュメントはここにあります:http://api.jquery.com/jQuery.support/

あなたが何を達成しようとしているのか正確にはわからないので、これらのどれが最も役立つかわかりません。

そうは言っても、最善の策は、サーバー側の言語を使用して、出力に別のスクリプトをリダイレクトまたは書き込むことだと思います(それがオプションの場合)。モバイルブラウザxの機能を実際には知らないため、サーバー側で検出および変更ロジックを実行するのが最も信頼できる方法です。もちろん、サーバー側の言語を使用できない場合は、それがすべて重要なポイントです:)

47
genkilabs 2011-06-10 08:26.

iPhoneストアやAndroidマーケットへのリンクなど、そのデバイスに固有のコンテンツを表示するために、クライアントが使用しているブランドデバイスを知りたい場合があります。モダナイザーは素晴らしいですが、HTML5やFlashなどのブラウザー機能のみを表示します。

これは、デバイスタイプごとに異なるクラスを表示するjQueryのUserAgentソリューションです。

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show(); } else if (checker.iphone){ $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show(); } else { $('.unknown-device').show();
    }
}

このソリューションはGraphicsManiacsによるものです http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

45
Gabriel 2012-11-22 03:03.

解決策が見つかりました: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/。

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

次に、モバイルかどうかを確認するには、次を使用してテストできます。

if(isMobile.any()) {
   //some code...
}
27
Chris Moschini 2012-05-12 08:42.

「モバイル」が「小さな画面」を意味する場合、私はこれを使用します。

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

iPhoneでは、window.screen.widthが320になります。Androidでは、window.outerWidthが480になります(ただし、Androidによって異なります)。iPadとAndroidタブレットは、768のような数値を返すため、希望どおりに全体が表示されます。

17
Ben H 2011-07-09 00:10.

信頼することはできませnavigator.userAgentん。すべてのデバイスが実際のOSを公開しているわけではありません。たとえば私のHTCでは、設定(「モバイル版を使用する」のオン/オフ)によって異なります。オンhttp://my.clockodo.com、単にscreen.width小さなデバイスを検出するために使用しました。残念ながら、一部のAndroidバージョンでは、screen.widthにバグがあります。この方法をuserAgentと組み合わせることができます。

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}
16
PeterPan 2013-06-27 07:15.

Modernizrを使用する場合はModernizr.touch、前述のように非常に簡単に使用できます。

ただし、Modernizr.touch安全のために、とユーザーエージェントテストを組み合わせて使用​​することをお勧めします。

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Modernizrを使用しない場合は、Modernizr.touch上記の関数を次のように置き換えるだけです。('ontouchstart' in document.documentElement)

また、ユーザーエージェントをテストするiemobileと、よりも広範囲のMicrosoftモバイルデバイスが検出されることに注意してくださいWindows Phone

このSOの質問も参照してください

14
Jacob King 2015-12-09 07:54.

この質問にはたくさんの答えがあることを私は知っていますが、私が見たところ、私がこれを解決する方法で答えに近づく人は誰もいませんでした。

CSSは、幅(メディアクエリ)を使用して、幅に基づいてWebドキュメントに適用されるスタイルを決定します。JavaScriptでwidthを使用してみませんか?

たとえば、Bootstrapの(モバイルファースト)メディアクエリには、4つのスナップ/ブレークポイントがあります。

  • エクストラスモールデバイスは768ピクセル以下です。
  • 小型デバイスの範囲は768〜991ピクセルです。
  • 中型デバイスの範囲は992〜1199ピクセルです。
  • 大型デバイスは1200ピクセル以上です。

これを使用して、JavaScriptの問題も解決できます。

まず、ウィンドウサイズを取得し、デバイスがアプリケーションを表示しているサイズを確認できる値を返す関数を作成します。

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

関数が設定されたので、それを呼び出して値を格納できます。

var device = getBrowserWidth();

あなたの質問は

ブラウザがハンドヘルドデバイス上にある場合は、別のスクリプトを実行したいと思います。

デバイス情報が得られたので、残っているのはifステートメントだけです。

if(device === "xs"){
  // Enter your script for handheld devices here 
}

CodePenの例を次に示します。 http://codepen.io/jacob-king/pen/jWEeWG

13
James Westgate 2015-09-29 03:54.

javascriptの1行で:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

ユーザーエージェントに「Mobi」が含まれていて(MDNによる)、ontouchstartが使用可能な場合は、モバイルデバイスである可能性があります。

12
Maksim Luzik 2013-10-09 02:05.

誰も素敵なサイトを指摘していないことに驚いています。 http://detectmobilebrowsers.com/ モバイル検出用にさまざまな言語でコードを作成しました(これに限定されません)。

  • Apache
  • ASP
  • C#
  • IIS
  • JavaScript
  • NGINX
  • PHP
  • Perl
  • Python
  • Rails

また、タブレットも検出する必要がある場合は、[バージョン情報]セクションで追加の正規表現パラメーターを確認してください。

Androidタブレット、iPad、Kindle Fire、PlayBookは設計上検出されません。タブレットのサポートを追加|android|ipad|playbook|silkするには、最初の正規表現に追加します。

11
MoDFoX 2010-08-19 09:46.

小さなディスプレイについて特に心配していない場合は、幅/高さの検出を使用できます。そのため、幅が一定のサイズ未満の場合、モバイルサイトはスローされます。これは完璧な方法ではないかもしれませんが、複数のデバイスを検出するのがおそらく最も簡単です。iPhone 4(大解像度)用に特定のものを入れる必要があるかもしれません。

10
Mark 2013-01-25 05:10.

チェックするだけnavigator.userAgentでは必ずしも信頼できるとは限りません。をチェックすることで、より高い信頼性を実現できますnavigator.platform。前の回答を簡単に変更すると、うまくいくようです。

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}
9
dotTutorials 2013-04-19 00:19.

コントロールのレイヤーを追加するために、HTML5ストレージを使用して、モバイルストレージとデスクトップストレージのどちらを使用しているかを検出します。ブラウザがストレージをサポートしていない場合は、モバイルブラウザ名の配列があり、ユーザーエージェントを配列内のブラウザと比較します。

とても簡単です。関数は次のとおりです。

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}
8
Luca Passani 2014-03-12 07:20.

チェックアウトすることをお勧めします http://wurfl.io/

一言で言えば、小さなJavaScriptファイルをインポートする場合:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

次のようなJSONオブジェクトが残ります。

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(もちろん、Nexus 7を使用していることを前提としています)。次のようなことができるようになります。

if(WURFL.is_mobile) {
    //dostuff();
}

これはあなたが探しているものです。

免責事項:私はこの無料サービスを提供する会社で働いています。

8
Victor Juri 2012-02-27 10:57.

素晴らしい答えありがとう。Windows PhoneとZuneをサポートするための小さな改善:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}
7
Safran Ali 2011-12-23 12:43.

この投稿をチェックしてください。タッチデバイスが検出されたときに何をするか、またはtouchstartイベントが呼び出された場合に何をするかについての本当に素晴らしいコードスニペットを提供します。

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}
7
vin 2018-06-26 16:52.

メディアクエリを使用すると、簡単に処理できます。

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}
6
Jonathon Hill 2011-10-07 06:46.

これは、モバイルブラウザで実行しているかどうかについて真/偽の答えを取得するために使用できる関数です。はい、それはブラウザスニッフィングですが、時にはそれがまさにあなたが必要とするものです。

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}
6
jcubic 2014-05-07 01:11.

すべての回答はユーザーエージェントを使用してブラウザーを検出しますが、ユーザーエージェントに基づくデバイス検出はあまり良い解決策ではありません。タッチデバイスなどの機能を検出することをお勧めします(新しいjQueryでは削除$.browserして$.support代わりに使用します)。

モバイルを検出するには、タッチイベントを確認します。

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

JavaScriptを使用して「タッチスクリーン」デバイスを検出するための最良の方法は何ですか?

6
Sanjay Joshi 2017-03-30 21:32.

次の文字列の組み合わせを使用して、使用されているデバイスタイプを確認することをお勧めします。

Mozillaのドキュメントに従って、文字列Mobiをお勧めします。ただし、古いタブレットの中には、Mobi使用しただけではtrueを返さないものがあるため、Tablet文字列も使用する必要があります。

同様に、安全のためにiPadiPhone文字列を使用してデバイスタイプを確認することもできます。

新しいデバイスのほとんどは、文字列のみで返さtrueMobiます。

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}
5
NCoder 2013-06-07 05:01.

これを使って:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

次に、これを使用します。

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}
5
lucasls 2014-03-12 04:00.

に基づくシンプルな機能 http://detectmobilebrowser.com/

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));
}
5
Vishnu Prasanth G 2018-03-02 05:09.
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

いずれかのブラウザにアクセスし、navigator.userAgentを取得しようとすると、次のようなブラウザ情報が取得されます。

Mozilla / 5.0(Macintosh; Intel Mac OS X 10_13_1)AppleWebKit / 537.36(KHTML、Geckoなど)Chrome / 64.0.3282.186 Safari / 537.36

あなたがモバイルでやるなら同じことはあなたがフォローするでしょう

Mozilla / 5.0(Linux; Android 8.1.0; Pixel Build / OPP6.171019.012)AppleWebKit / 537.36(KHTML、Geckoなど)Chrome / 61.0.3163.98 Mobile Safari / 537.36

すべてのモバイルブラウザには「モバイル」を含む文字列を持つユーザーエージェントがあるため、コードで上記のスニペットを使用して、現在のユーザーエージェントがウェブ/モバイルであるかどうかを確認しています。結果に基づいて、必要な変更を行います。

4
Yene Mulatu 2012-05-02 07:03.

私はこれを使います

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}
4
Luca Mori Polpettini 2015-04-22 06:08.

どの程度mobiledetect.net?

他の解決策は基本的すぎるようです。これは軽量のPHPクラスです。User-Agent文字列を特定のHTTPヘッダーと組み合わせて使用​​して、モバイル環境を検出します。WordPress、Drupal、Joomla、Magentoなどで利用可能なサードパーティのプラグインのいずれかを使用して、MobileDetectを利用することもできます。

4
Kousha 2013-08-27 08:00.

これは、プロジェクトで使用しているコードです。

function isMobile() {
 try {
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
     return true;
    };
    return false;
 } catch(e){ console.log("Error in isMobile"); return false; }
}

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

ジェフ・トゥイーディーはトロルに直接話しかけ、「温かい怒りの料理」を約束します

ジェフ・トゥイーディーはトロルに直接話しかけ、「温かい怒りの料理」を約束します

写真:Mark Metcalfe / Getty Imagesバンドのファンに感謝している限り、JeffTweedyはWilcoのFacebookページを政治のないフォーラムに変えようとはしていません。フロントマンは昨日、ウィルコがソーシャルメディアの存在から州と世界の問題を遠ざけることを望んでいるトロールに転向した(またはおそらく彼らはいつもそうだった)コメント投稿者に応えてオンラインの文書を投稿した。

弾丸、バダス、そして赤ちゃん:ジョンウーの見事なピストルオペラはそれをすべて持っています

弾丸、バダス、そして赤ちゃん:ジョンウーの見事なピストルオペラはそれをすべて持っています

ハードボイルドジョンウーの1992年の傑作であるハードボイルドの数分後、2人のガンランナーが、人々が鳥かごを運ぶ香港の喫茶店の1つから逃げようとします。彼らは取引をしているが、彼らを破滅させるために数人のスーパーコップが現れ、彼らはただ逃げようとしている。

ローマ経済は大国でした

ローマ経済は大国でした

写真提供者:Clive Brunskill / Gettyローマ帝国のことを非常に多く覚えています。剣闘士は常に人気があり、軍隊はすぐ近くにありますが、ローマで最も印象的なのは、残された建物の記念碑的な風景です。

ホーク+ハチェットキャンドルで森を家に持ち帰る

ホーク+ハチェットキャンドルで森を家に持ち帰る

Hawk + ​​Hatchet Hawk + ​​Hatchetキャンドルは、キャンプファイヤー、キャビン、港町の思い出をとらえるために、手で注がれ、混ぜられた小さなバッチです。ろうそくは見栄えが良く、匂いもさらに良く、圧倒されることなく部屋を満たし、意図されたシーンをうまく呼び起こします。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

安全な公衆パニックルーム

安全な公衆パニックルーム

不気味な音に慣れて、コンクリートの周りをうろつきます。痛みや苦い口を吐き出し、「過ち」の不思議な病気を通してもう一度味わうことを切望します。

長い間行方不明だった 2 つのサンフランシスコ クリークが間もなく日の目を見る可能性がある

都市の水路を回復する理由はたくさんありますが、気候が変化するにつれて、それらはすべてより持続可能な未来につながります.

長い間行方不明だった 2 つのサンフランシスコ クリークが間もなく日の目を見る可能性がある

サンフランシスコの長い間失われた小川を復元する動きが高まっており、コミュニティを地域の生態系と結びつけ、また、都市が気候変動や季節的な洪水に適応するのに役立つ新しいタイプの「グリーン インフラストラクチャ」を作成しています。最新の取り組みは町の 2 つの非常に異なる場所で行われており、それらは明確ではあるが補完的な方法で展開されています。

サンフランシスコのベイエリアで家族写真が撮れる場所トップ 5

サンフランシスコのベイエリアで家族写真が撮れる場所トップ 5

ベイエリアには写真を撮るための美しい屋外スポットがたくさんあります。この記事のすべての写真は、ベイエリアにいるさまざまな PictureHum フォトグラファーとの PictureHum セッションからのものです。

退屈に耐えられないから生きていけない

退屈に耐えられないから生きていけない

それが現代の衝動です — より少ないもので世界を覆し、私たちのほんのわずかな瞬間を自分たちから盗もうとする. 私はかつてダイニングルームのソファで一日を過ごし、祖父母の農家に斜めに差し込む光を眺め、私には関係のない世界について話している大人のつぶやきを半分聞いたり、壁を通してくぐもったテレビを聞いたり、遊んだりしました。床と犬と私の小さな靴を暖めた太陽の黒点と。

Language