Détecter téléphone/tablette/client web à l'aide de javascript
Je suis en train d'essayer de détecter si l'utilisateur est sur un téléphone, d'une tablette ou d'un pc
J'ai cherché sur Google pour un certain temps, apparemment il n'y a pas de solution facile.
Bien, je suppose que je ne devrais pas utiliser la Résolution, puisque de nos jours, certains comprimés ont un incroyable résolutions.
Je ne devrais pas compter sur l'orientation, parce que windows8 ordinateurs portables peut juste tourner comme les tablettes.
(et responsive design est tout simplement trop difficile pour mon projet en cours)
J'ai essayé d'utiliser UserAgent(la pensée, il a ses inconvénients aussi), mais ne peut pas obtenir ce travail, ci-dessous est une conjonction de différentes versions en ligne que j'utilise pour distinguer téléphone/tablette depuis un Pc, ils ne fonctionnent pas et je n'ai aucune idée de pourquoi
var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry','iemobile','phone','mobile'];
for(i in agents) {
if(navigator.userAgent.toLowerCase().match('/'+agents[i]+'/i')) {
return true;
}
}
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
return true;
}
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/i)
|| navigator.userAgent.match(/Windows Phone/i)
|| navigator.userAgent.match(/bada/i)
|| navigator.userAgent.match(/Bada/i)
){
return true;
}
Comment font-ils 'ne fonctionnent pas'?
Pourquoi avez-vous besoin de décider pour tablette/téléphone/pc? C'est pas comme si vous devez ajouter un contrôle si vous suspect que la personne n'a pas un clavier physique (qu'est-ce que Asus transformer, après tout?)
Asus PadFone complique encore plus les choses. Il peut passer du téléphone à la tablette lors de l'exécution, IIUC
eh bien..tout ce qui précède suffit de ne pas retourner la valeur true. Honnêtement, je n'ai aucune idée de pourquoi cela arriverait
OriginalL'auteur Matthew Yang | 2013-02-26
Vous devez vous connecter pour publier un commentaire.
Oui, vous ne devez pas compter sur la résolution ou l'orientation. Mais que diriez-em-fondé des requêtes de média?
Afin de lire les résultats de votre requête de média avec javascript, vous pourriez essayer d'ajouter une requête de média pour votre css pour ajouter invisible le contenu de votre page:
Alors lire le contenu à l'aide de javascript:
Ensuite déterminer ce que vous voulez charger:
OriginalL'auteur Jani Hyytiäinen
Les Agents utilisateurs sont assez peu fiables, et peut effectivement être truquées par les clients. Je vous recommande de mettre l'accent sur la fonctionnalité plutôt que de dispositifs spécifiques. Moderniste est une bibliothèque qui peut être utilisée pour détecter si les fonctionnalités sont disponibles sur le périphérique client. Cela vous permettra de détecter si des éléments comme le local de stockage, etc sont disponibles. Si vous êtes intéressé par quelque chose comme Responsive Web Design au lieu de l'appareil/de la client caractéristiques spécifiques, vous pouvez utiliser une bibliothèque comme Twitter Bootstrap. Au bas de l'Échafaudage de la page, il a même quelques fonctionnalités qui permettent la détection de téléphone vs tablette vs de bureau, même si je crois qu'il est basé sur la résolution.
--Modifier pour ajouter--
Je tiens également à souligner que vous devriez vous demander pourquoi vous avez fait attention à ce dispositif, l'utilisateur est sur. Il sera beaucoup plus facile de détecter la particularité que vous vous souciez qu'il sera de détecter toutes les fonctionnalités qui sont disponibles.
Google Analytics est également accentuée par l'importance de connaître les utilisateurs de l'appareil
OriginalL'auteur TwentyMiles
Je voudrais vous recommandons d'examiner les requêtes des médias et de la
<viewport>
tag.Quelques excellents articles sur le processus de pensée derrière responsive design.
http://www.html5rocks.com/en/mobile/mobifying/
http://www.magazine.org/timecom-gm-craig-ettinger-bringing-responsive-web-design-iconic-brand
La question demeure de savoir ce que vous voulez accomplir?
OriginalL'auteur Adrian J. Moreno
Réponse rapide pourquoi le match de l'agent ne fonctionne pas sur la liste donnée: "Android" n'est pas dans le retour de l' (agent) de la chaîne!
Il suffit de supposer qu'AUCUN de la chaîne est correcte et les menteurs abondent.
J'ai posté le code testé en prouvant la android cas.
Désolé, on m'a dit que c'était impossible à faire nevemind je l'ai eu à travailler;
OriginalL'auteur Robert Baer