web-dev-qa-db-fra.com

Détecter téléphone vs tablette

Existe-t-il un moyen de détecter si l'utilisateur utilise une tablette ou un téléphone? Par exemple, une personne surfant sur le Web à l'aide d'une tablette (toute tablette Android avec la version 3+ et l'iPad) aimerait sûrement voir la même version non dépouillée qu'une personne assise avec un ordinateur de bureau. Et un internaute téléphonique préférerait sûrement la version allégée du site, car elle est plus rapide à charger et peut être plus facile à naviguer avec votre pouce. Cela peut être fait en vérifiant la largeur d’écran de l’agent oct UserAgent trouvée ici:

Quel est le meilleur moyen de détecter un appareil mobile dans jQuery?

Mais le problème vient d'un téléphone comme Google Galaxy Nexus qui a la même résolution qu'une tablette, mais seulement la moitié de la taille de l'écran. À mon avis, il serait plus agréable de montrer la version mobile car l'écran est petit même si la résolution est élevée. 

Y a-t-il un moyen de détecter cela ou dois-je faire un compromis?

javascriptjqueryhtml5css3
22
just_user

Je pense que vous faites ici une distinction fondamentalement arbitraire entre tablette, téléphone ou tout autre appareil compatible Web. Il semble que les dimensions physiques de l'écran soient la métrique que vous souhaitez utiliser pour dicter le contenu que vous diffusez.

Dans ce cas, j'essaierais d'implémenter une logique basée sur les valeurs transmises par l'agent utilisateur dans les en-têtes HTTP ( [mobiforge.com ...] ) et réduirais gracieusement l'invite à inviter l'utilisateur si des informations n'étaient pas disponibles.

Votre logique pourrait ressembler un peu à ceci:

Mise à jour: Ma réponse a maintenant trois ans. Il convient de noter que la prise en charge de la réactivité de la conception a considérablement progressé et qu'il est désormais courant de fournir le même contenu à tous les appareils et de faire appel aux requêtes css média pour présenter le site de la manière la plus efficace pour l'appareil sur lequel il est visualisé.

17
Sam Greenhalgh

D'après la suggestion de Google: trouvé ici (référencé également par Greg), voici ce que j'ai déjà utilisé dans des projets. 

    if(/Mobile/i.test(navigator.userAgent) && !/ipad/i.test(navigator.userAgent) ){
        console.log("it's a phone");//your code here 
    }

Ce n'est peut-être pas la solution la plus élégante ... mais ça fait le travail.

3
Fernando

Si vous utilisez Cordova, j'aime ceci:

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet

puis n'importe où dans votre code, appelez ceci:

window.isTablet
3
Helzgate

Si vous utilisez des requêtes multimédia en théorie, vous pouvez utiliser l'ordinateur de poche @media, mais le support est quasiment inexistant.

Le moyen le plus simple d’identifier les appareils mobiles haute résolution serait de regarder le DPI de l’écran et le rapport entre les pixels (actuellement, via les balises webkit/mozilla spécifiques au fournisseur)

@media (-webkit-max-device-pixel-ratio: 2),  
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) {
   ...
}

edit: window.devicePixelRatio pour faire ce qui précède dans JS

Il y a un article de Nice ici avec beaucoup d'idées pour identifier les appareils mobiles.

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

3
ryan j

Malheureusement, à partir de maintenant, le seul moyen fiable de distinguer le mobile de la tablette consiste à utiliser la chaîne d'agent utilisateur. 

Je n'ai pas encore trouvé d'agent utilisateur incluant les dimensions du périphérique. 

Si vous essayez de calculer le nombre de ppp de votre appareil, ils vont presque tous atteindre 96 ppp, qu’il s’agisse d’un ordinateur de bureau ou d’un téléphone.

Recherchez iPad/iPod/iPhone dans la chaîne d'agent utilisateur pour détecter tout périphérique Apple. Cela vous dira si vous avez une tablette ou un téléphone/iPod d'Apple. Heureusement, il existe beaucoup moins de types de périphériques i-devices et il sera donc plus facile de les distinguer.

Pour identifier un périphérique Android, recherchez "Android" dans la chaîne de l'agent d'utilisateur. Pour déterminer s'il s'agit d'une tablette ou d'un téléphone, l'agent utilisateur du téléphone (pour les navigateurs Android natifs Android et Chrome) contiendra "Mobile Safari", alors que la tablette ne contiendra que "Safari". Cette méthode est recommandée par Google:

En tant que solution pour les sites mobiles, nos ingénieurs Android recommandent de détecte spécifiquement «mobile» dans la chaîne User-Agent ainsi que "Android."

Une description plus complète peut être trouvée ici:

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

Bien sûr, ce n'est pas idéal, mais semble être le seul moyen fiable. En guise d'avertissement, après avoir consulté un grand nombre d'échantillons de chaînes d'agent utilisateur (près de cent), j'ai constaté qu'un ou deux anciens appareils ne respectaient pas correctement la distinction "Mobile" par rapport à "Mobile Safari".

2
Greg

Pourquoi essayer de deviner ce que l'utilisateur a quand vous pouvez lui demander? Vous pouvez utiliser la résolution pour deviner le type d'appareil utilisé et demander à l'utilisateur quelle vue il souhaite voir s'il fait partie de la catégorie des appareils mobiles ou des tablettes. Si vous le détectez mal, c'est une nuisance pour l'utilisateur. Leur demander une fois quel type d'appareil ils ont est plus pratique à mon avis.

1
Matt Esch

Vous pouvez utiliser quelque chose comme Device Atlas pour détecter ces fonctions hors de l'agent d'utilisateur. L'offre une API que vous pouvez héberger vous-même, et ils offrent également un service de cloud. Les deux sont premium (payé)

Sinon, vous pouvez utiliser quelque chose comme Wurfl qui, selon mon expérience, est moins précise.

1
darryn.ten

Je pense que WURFL pourrait être quelque chose à regarder: http://wurfl.sourceforge.net/help_doc.php C'est un peu plus hardcore depuis sa solution plus côté serveur plutôt que de le faire simplement via de simples requêtes multimédia (par exemple, votre propre ou en utilisant un framework tel que Foundation CSS) ou avec du javascript pur (adapt.js). 

Que peut faire quelque chose comme:

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true');
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true');
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true');
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true');

if (!$is_wireless) {
 if ($is_smarttv) {
  echo "This is a Smart TV";
 } else {
  echo "This is a Desktop Web Browser";
 }
} else {
 if ($is_tablet) {
  echo "This is a Tablet";
 } else if ($is_phone) {
  echo "This is a Mobile Phone";
 } else {
  echo "This is a Mobile Device";
 }
}

ref: http://wurfl.sourceforge.net/php_index.php

ou en Java:

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName());
WURFLManager manager = wurfl.getWURFLManager();
Device device = manager.getDeviceForRequest(request);
String x = device.getCapability("is_tablet"); //returns String, not boolean btw

ref: http://wurfl.sourceforge.net/njava_index.php

0
armyofda12mnkeys

Comme de nombreuses autres affiches l'ont noté, vous allez probablement vouloir analyser l'en-tête de requête User-Agent. À cette fin, la bibliothèque ua-parser-js est très utile.

0
user393274