Quelle est la meilleure façon de détecter un appareil mobile à jQuery?

vous pouvez également utiliser le script côté serveur et définir des variables javascript à partir de celui-ci.

exemple en php

télécharger http://code.google.com/p/php-mobile-detect / et ensuite définir les variables javascript.

<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>

j'ai essayé certaines des façons et puis j'ai décidé de remplir une liste manuellement et faire une simple vérification JS. Et à la fin l'utilisateur doit confirmer. Parce que certains contrôles donnaient des faux positifs ou négatifs.

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

maintenant, si vous voulez utiliser jQuery pour définir le CSS, vous pouvez faire ce qui suit:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

depuis que les frontières entre les appareils mobiles et fixes deviennent fluentes et les browers mobiles sont déjà puissants, la vérification de la largeur et la confirmation de l'utilisateur seront probablement les meilleures pour l'avenir (en supposant que la largeur dans certains cas sera encore importante). Parce que les touches sont déjà converties en sauts de souris.

et concernant la mobilité mobile, je vous suggère de penser à idée de Yoav Barnea :

if(typeof window.orientation !== 'undefined'){...}

function isDeviceMobile(){
 var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};      
 return isMobile.any()
}

j'utilise ce

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

C'est mon code que j'utilise dans mes projets:

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; }
}

Caisse http://detectmobilebrowsers.com / qui vous fournit le script pour détecter l'appareil mobile dans la variété des langues, y compris

JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, C#, ColdFusion et beaucoup plus""

vous pouvez utiliser media query pour pouvoir le gérer facilement.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

var device = {
  detect: function(key) {
    if(this['_'+key] === undefined) {
      this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_'+key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.android() || this.webOS();
  }
};

j'ai utilisé quelque chose comme ça dans le passé. C'est similaire à une réponse précédente, mais techniquement plus performante en ce qu'elle cache le résultat de la correspondance, surtout si la détection est utilisée dans une animation, un événement scroll, ou autre.

Cela semble être une approche globale, solution moderne:

https://github.com/matthewhudson/device.js

il détecte plusieurs plates-formes, smartphone vs tablettes, et l'orientation. Il ajoute également des classes à L'étiquette de corps de sorte que la détection n'a lieu qu'une seule fois et vous pouvez lire quel appareil vous êtes sur avec une série simple de jQuery fonctions hasClass.

regardez ça...

[Avertissement: je n'ai rien à voir avec la personne qui l'a écrit.]

http://www.w3schools.com/jsref/prop_nav_useragent.asp

filtre par nom de plate-forme.

Ex:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

if ( (platform != Ipad) || (x < 768) )  {


} 

^ ^

si par un appareil mobile vous comprenez un tactile, alors vous pouvez le déterminer en vérifiant l'existence de manipulateurs tactiles:

let deviceType = (('ontouchstart' in window)
                 || (navigator.maxTouchPoints > 0)
                 || (navigator.msMaxTouchPoints > 0)
                 ) ? 'touchable' : 'desktop';

jQuery n'est pas nécessaire pour cela.

aussi je recommande d'utiliser la petite bibliothèque JavaScript Bowser, oui non r. Il est basé sur le navigator.userAgent et assez bien testé pour tous les navigateurs, y compris iPhone, Android, etc.

https://github.com/ded/bowser

Vous pouvez utiliser simplement dire:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.android){
  alert('Hello mobile');
}

, en Ajoutant:

dans certaines versions de iOS 9.x , Safari ne présente pas le" iPhone "dans navigator.userAgent , mais le montrer dans navigator.platform .

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile){
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    }

je connais cette vieille question et il ya beaucoup de réponse, mais je pense que cette fonction est simple et aidera à détecter tous les mobiles, tablette et navigateur informatique, il fonctionne comme un charme.

function Device_Type() 
{
    var Return_Device; 
    if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
    {
        if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
        {
            Return_Device = 'Tablet';
        }
        else
        {
            Return_Device = 'Mobile';
        }
    }
    else if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
    {
        Return_Device = 'Tablet';
    }
    else
    {
        Return_Device = 'Desktop';
    }

    return Return_Device;
}

Voici une autre suggestion mise en œuvre avec pur JavaScript (es6)

const detectDeviceType = () =>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        ? 'Mobile'
        : 'Desktop';

detectDeviceType();

ce sont toutes les vaules que je connais. S'il vous plaît aider udating le tableau si vous connaissez d'autres valeurs.

function ismobile(){
   if(/android|webos|iphone|ipad|ipod|blackberry|opera mini|Windows Phone|iemobile|WPDesktop|XBLWP7/i.test(navigator.userAgent.toLowerCase())) {
       return true;
   }
   else
    return false;
}

selon ce que vous voulez détecter mobile (ce qui signifie que cette suggestion ne conviendra pas aux besoins de tout le monde), vous pourriez être en mesure d'obtenir une distinction en regardant l'onmouseenter-à-onclick milliseconde différence, comme je l'ai décrit dans cette réponse .

je le fais pour mes applications .NET.

Dans mon partagé _Layout.cshtml de la Page, j'ajoute ce.

@{
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}

<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

ensuite pour vérifier sur n'importe quelle page de votre site (jQuery):

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>

utiliser cette

if( screen.width <= 480 ) { 
    // is mobile 
}

si vous voulez tester l'agent utilisateur, la bonne façon est de tester l'agent utilisateur, i.e. test navigator.userAgent .

si le user simule cela, ils ne sont pas concernés. Si vous test.isUnix() vous ne devriez pas avoir à vous inquiéter si le système est Unix.

en tant qu'utilisateur en changeant userAgent est également très bien, mais vous ne vous attendez pas à des sites à rendre correctement si vous le faites.

si vous souhaitez fournir un support pour les navigateurs Microsoft vous devez vous assurer que les premiers caractères du contenu comprend et test de chaque page que vous écrivez.

... Toujours respecter les normes. Puis le hacker jusqu'à ce qu'il fonctionne dans la version actuelle D'IE & ne vous attendez pas à ce qu'il semble bon. C'est ce que GitHub fait, et on leur a donné 100 millions de dollars.