4

Je suis curieux de savoir comment vérifier iPhone, iPad et autres navigateurs mobiles (JavaScript ou CSS)Détection de navigateurs mobiles sur le Web?

Edit:.

chaîne de l'agent utilisateur Non, s'il vous plaît. Cela peut être truqué.

Dupes possibles:

+0

duplication possible de [Méthode standard pour détecter les navigateurs mobiles dans une application Web basée sur la requête http] (http: // stackoverflow.com/questions/142273/standard-façon-de-détecter-mobile-navigateurs-dans-un-web-application-based-on-the-http-req) –

+2

Alors que faire si il peut être truqué? Si c'est ce cas que l'intention des utilisateurs était de voir le Web de cette façon de toute façon. – Andrew

+0

Je crains qu'il n'y ait pas d'autre moyen de détecter un navigateur que de lire sa chaîne d'agent utilisateur. –

Répondre

2

Fondamentalement, vous vérifiez l'agent utilisateur chaîne

voir http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

Détecter iPhone:

navigator.userAgent.toLowerCase().search("iphone") > -1 

En général, la détection des caractéristiques est meilleure que la détection par le navigateur, il est préférable de savoir ce que le navigateur de l'utilisateur peut faire que ce qu'il est en utilisant. Modernizer est un bon outil pour cela.

+0

Le code ci-dessus fonctionnera-t-il également pour l'iPad? – Moshe

+0

@Moshe No. Changer l'iPhone en iPad pour détecter l'iPad – Adam

7

J'utiliser WURFL. Il s'agit d'une base de données XML Open Source de plus de 10000 appareils mobiles qui détectera (presque toujours) les capacités de votre téléphone mobile et de votre navigateur, compte tenu de la valeur d'en-tête HTTP user-agent.

Vous obtiendrez des informations comme:

  1. Taille de l'écran
  2. support XHTML/HTML niveau
  3. support de type graphique

beaucoup d'autres.

Il existe des API wrapper pour les langages populaires tels que PHP, Java et .NET, vous n'aurez donc pas à traiter vous-même la base de données XML.

0

Utilisez javascript pour détecter l'agent utilisateur HTTP - terme de fantaisie pour le nom du navigateur

1

utilisation Modernizr - http://modernizr.com/

Modernizr est un script JS qui teste le navigateur pour une variété de HTML5 et CSS3 capacités lorsque la page se charge. Vous pouvez soit regarder dans l'objet Modernizr JS, soit utiliser les classes qu'il ajoute à l'élément HTML. Si la classe «touch» est présente, vous avez un appareil à écran tactile; sinon, la classe est sans contact. Ensuite, vous pouvez le faire dans votre CSS

.touch .myElement { /* touch device styles */ } 

.no-touch .myElement { /* regular browser styles */ } 

Test d'une capacité de navigateurs est beaucoup plus utile et le futur qui renifler pour les agents utilisateurs. De cette façon, pour chaque fonctionnalité CSS3 que vous voulez ajouter, vous pouvez facilement écrire un repli, comme je le montre ici.

Questions connexes