Détecter l’iPad Mini en HTML5

Question

Apple iPad Mini est un petit clone de l'iPad 2 en plus de façons que ce que nous voulons. En JavaScript, l' window.navigator objet expose les mêmes valeurs pour la Mini et de l'iPad 2. Mes tests de mesure de détecter la différence n'ai pas conduire à la réussite.

Pourquoi est-ce important?

Comme l'iPad Mini et de l'iPad 2 écrans sont identiques dans les pixels, mais varient en taille réelle (pouces / centimètres), ils varient en PPI (pixels par pouce).

Pour les applications web et les jeux d'offrir une interface utilisateur conviviale, certains éléments sont ajustés en taille par rapport à l'utilisateur d'un pouce ou d'un doigt position, donc, on peut en vouloir à l'échelle de certaines images ou de boutons pour fournir une meilleure expérience utilisateur.

Les choses que j'ai essayé jusqu'à présent (y compris certains assez évident):

• window.devicepixelratio
• CSS de l'élément de largeur en cm unité
• CSS media queries (comme resolution et -webkit-device-pixel-ratio)
• Les dessins SVG dans les mêmes unités
• À faire toutes sortes de CSS webkit transforme pour un temps de comptage et de rendu d'images avec des requestAnimFrame (j'ai été en espérant pour détecter une différence mesurable)

Je suis frais d'idées. Que diriez-vous?

Mise à jour Merci pour les réponses à ce jour. Je voudrais faire un commentaire sur les gens de voter contre la détection de l'iPad mini contre 2 comme Apple l'a uhm, une ligne directrice pour les gouverner tous. Ok, voici mon raisonnement pourquoi je crois qu'il fait vraiment tous les sens dans le monde pour savoir si une personne est à l'aide d'un iPad mini ou un 2. Et le faire avec mon raisonnement ce que vous aimez.

L'iPad mini n'est pas seulement un beaucoup plus petit appareil (9,7 pouces rapport de 7,9 pouces), mais son facteur de forme permet une utilisation différente. L'iPad 2 est généralement tenue avec les deux mains lorsqu'de jeu, sauf si vous êtes Chuck Norris. La mini est plus petit, mais il est aussi beaucoup plus léger et permet de gameplay où vous le tenez dans une main et utilisez l'autre pour faire glisser ou appuyez sur ou que sais-je encore. En tant que game designer et développeur moi-même, je voudrais juste savoir si c'est un mini donc je peux choisir de donner au joueur un autre controlscheme si je veux (par exemple après des tests A/B avec un groupe de joueurs).

Pourquoi? Eh bien, c'est un fait avéré que la majorité des utilisateurs ont tendance à aller avec les paramètres par défaut, donc en laissant un stick analogique virtuel et de mettre certains autres tap-fonction de contrôle sur l'écran (juste donner un exemple au hasard ici) lorsque le lecteur charge le jeu pour la première fois, c'est ce que j'ai, et probablement d'autres concepteurs de jeu, aimerait être en mesure de le faire.

Donc, à mon humble avis cela va au-delà de l'épaisseur des doigts / lignes directrices de discussions et c'est juste quelque chose d'Apple et tous les autres fournisseurs devraient faire: nous permettre d'identifier de manière unique votre appareil et de penser différentes au lieu d' suivant les lignes directrices.

Answer 1

Lire un fichier audio stéréo et de comparer la réponse de l’accéléromètre lorsque volume est élevé sur le canal droit et sur le canal gauche - iPad2 a haut-parleurs mono alors qu’iPad Mini a haut-parleurs stéréo.

Besoin de votre aide pour rassembler les données, veuillez visiter cette page et m’aident à collecter des données pour cette idée folle. Je n’ai pas un iPad mini donc j’ai vraiment besoin de votre aide

Answer 2

Mise à jour: Il ressemble à ces valeurs, ce sont les rapports de la fenêtre d'affichage de la largeur et de la hauteur au moment de la création d'un onglet, et ils ne changent pas lors de la rotation, de sorte que cette méthode ne peut pas être utilisé pour la détection de dispositif!

Vous pouvez utiliser l' screen.availWidth ou screen.availHeight comme ils semblent l'être différent de l'iPad Mini et l'iPad 2.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

Source: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

Answer 3

Je comprends que cela peut être un peu low-tech solution, mais depuis nous n'arrivons pas à trouver quoi que ce soit d'autre encore..

Je suis en supposant que vous avez déjà vérifier pour la plupart des autres appareils, donc je vois les scénarios suivants possibles.

Vous pouvez le vérifier TOUTES les possibilités de la plupart des appareils populaires qui exigent une CSS spéciale/de dimensionnement, et si elle correspond à aucun de ceux qui supposent que c'est un iPad mini ou tout simplement demander à l'utilisateur?

// Device checks here
...
else {
  // it would probably be better to make this a nicer popup-thing
  var mini = prompt("Are you using a iPad mini? Press yes for a better user experience");
  // Store the result for future visits somehow.
}

Je sais que cela peut sembler stupide approche de l'instant, mais si nous n'avons actuellement aucun moyen de décider si le périphérique est un iPad mini ou un iPad 2, à moins que le site web sera utilisable avec l'iPad mini périphériques de faire quelque chose comme cela.

On pourrait même aller avec quelque chose comme ceci:

"Pour vous donner la meilleure expérience de navigation possible, nous essayons de détecter votre appareil-type pour personnaliser le site web de votre appareil. Malheureusement, en raison des limites, ce n'est pas toujours possible et il nous est actuellement impossible de déterminer si vous utilisez un iPad 2 ou un iPad mini à l'aide de ces méthodes.

Pour la meilleure expérience de navigation, sélectionnez ce périphérique que vous utilisez ci-dessous.

Ce choix sera stocké pour de futures visites sur le site web de ce dispositif.

[] iPad 2 
[*] iPad mini
[] Ancient blackberry device

"

Je ne suis pas entièrement familier avec ce que vous pouvez et ne pouvez pas le faire côté client en Javascript. Je sais que vous pouvez obtenir un IP de l'utilisateur, mais est-il possible d'obtenir un utilisateur de l'adresse mac? Sont ceux des gammes différentes entre iPad2 et iPad mini?

Answer 4

Je sais que c'est horrible solution, mais pour le moment le seul moyen de différencier entre un iPad Mini et un iPad 2 est de vérifier son numéro de version et la carte de chaque numéro de build avec le périphérique.

Laissez-moi vous donner un exemple: iPad mini, version 6.0, est d'exposer "10A406" comme numéro de build, tandis que l'iPad 2 est l'exposant "10A5376e".

Cette valeur peut être facilement obtenue par le biais d'un regex sur l'agent utilisateur (window.navigator.userAgent); ce numéro est précédé de la lettre "Mobile/".

Malheureusement c'est la seule façon claire pour détecter un iPad Mini; je suggère d'adopter une viewport approche (où la prise en charge, à l'aide de vh / vw unités) pour afficher correctement le contenu sur différentes tailles d'écran.

Answer 5

tl;dr Ne compense pas la différence entre l'iPad mini et de l'iPad 2, à moins que vous aurez également compenser entre les gras et les maigres doigts.

Apple semble être délibérément en essayant de ne pas vous laisser faire la différence. Apple ne semble pas vouloir nous écrire de code différent pour la taille différente des versions de l'ipad. Ne faisant pas partie de Apple moi-même, je ne sais pas ce c'est sûr, je dis juste que c'est ce qu'il apparaît comme. Peut-être, si la communauté des développeurs est livré avec un détecteur de fantaisie pour l'iPad mini, Apple peut délibérément rompre ce détecteur dans les futures versions d'iOS. Apple veut que vous définissez votre objectif minimum de la taille de 44 iOS points, et iOS pour afficher en deux tailles, la plus grande iPad de la taille et de la petite iPhone/iPad mini taille. 44 points, c'est l'abondance généreuse, et vos utilisateurs seront certainement de savoir si ils sont sur la plus petite de l'iPad, de sorte que ne peut compenser sur leur propre.

Je suggère de revenir à votre raison de la demande de détecteur: le réglage de la taille de la cible pour la fin de confort de l'utilisateur. En décidant de la conception pour une taille sur le grand iPad et une autre taille sur le petit iPad vous de décider que toutes les personnes ont la même taille de doigts. Si votre conception est assez serré que la différence dans la taille d'un iPad 2 et un iPad mini fait une différence, que la taille des doigts entre moi et ma femme va faire une grande différence. Afin de compenser pour l'utilisateur taille de doigt, pas un modèle iPad.

J'ai une suggestion sur la façon de mesurer la taille de doigt. Je suis un natif iOS développeur, donc je ne sais pas si cela peut être accompli en HTML5, mais voici comment je voudrais mesurer la taille de doigt dans une application native. J'aurais l'utilisateur de pincement de deux objets ensemble, puis de mesurer à quelle distance ils se rencontrent. Les petits doigts vont obtenir les objets plus rapprochés, et vous pouvez utiliser cette mesure de calculer un facteur d'échelle. Cela s'ajuste automatiquement à la taille de l'iPad. La même personne aura une plus grande mesure sur l'écran de points sur un iPad mini que sur un iPad 2. Un jeu que vous pouvez appeler cela une étape de calibrage, ou même ne pas l'appeler. Ont comme une étape de départ. Par exemple, dans un jeu de tir le joueur mettre les munitions dans l'arme, avec un pincement de mouvement.