Détecter l'iPad Mini en HTML5


376

L'iPad Mini d'Apple est un clone plus petit de l'iPad 2 à bien des égards que nous ne le souhaiterions. En JavaScript, l' window.navigatorobjet expose les mêmes valeurs pour le Mini et l'iPad 2. Mes tests jusqu'à présent pour détecter la différence n'ont pas abouti.

Pourquoi est-ce important?

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

Pour que les applications Web et les jeux offrent une interface utilisateur conviviale, certains éléments sont ajustés en taille par rapport à la position du pouce ou du doigt d'un utilisateur, ainsi, nous pouvons vouloir mettre à l'échelle certaines images ou boutons pour offrir une meilleure expérience utilisateur.

Les choses que j'ai essayées jusqu'à présent (y compris certaines approches assez évidentes):

  • window.devicepixelratio
  • Largeur de l'élément CSS en cm
  • Requêtes multimédias CSS (telles que resolutionet-webkit-device-pixel-ratio )
  • Dessins SVG dans des unités similaires
  • Faire toutes sortes de transformations webkit CSS pour un temps défini et compter les images rendues avec requestAnimFrame(j'espérais détecter une différence mesurable)

Je suis à court d'idées. Et vous?

Mise à jour Merci pour les réponses jusqu'à présent. Je voudrais commenter les gens qui votent contre la détection de l'iPad mini contre 2 car Apple a euh, une ligne directrice pour les gouverner tous. D'accord, voici mon raisonnement pour lequel je pense que cela a vraiment du sens dans le monde de savoir si une personne utilise un iPad mini ou un 2. Et faites avec mon raisonnement ce que vous aimez.

L'iPad mini n'est pas seulement un appareil beaucoup plus petit (9,7 pouces contre 7,9 pouces), mais son facteur de forme permet une utilisation différente. L'iPad 2 est généralement tenu à deux mains lorsque vous jouez, sauf si vous êtes Chuck Norris . Le mini est plus petit, mais il est également beaucoup plus léger et permet un gameplay où vous le tenez dans une main et utilisez une autre pour glisser ou toucher ou ainsi de suite. En tant que concepteur et développeur de jeux moi-même, j'aimerais juste savoir s'il s'agit d'un mini afin que je puisse choisir de fournir au joueur un schéma de contrôle différent si je le souhaite (par exemple après un test A / B avec un groupe de joueurs).

Pourquoi? Eh bien, c'est un fait avéré que la majorité des utilisateurs ont tendance à utiliser les paramètres par défaut, donc en laissant de côté une manette virtuelle et en mettant un autre contrôle basé sur les taps à l'écran (donnant juste un exemple arbitraire ici) lorsque le joueur charge le jeu pour la première fois est ce que j'aimerais, et probablement d'autres concepteurs de jeux, pouvoir faire.

Donc, à mon humble avis, cela va au-delà des discussions épineuses / directives et c'est juste quelque chose qu'Apple et tous les autres fournisseurs devraient faire: nous permettre d'identifier de manière unique votre appareil et de penser différemment au lieu de suivre les directives.


bonne question .. même je cherchais une solution. Rien trouvé sur le web
AnhSirk Dasarp

4
La meilleure chose est de déposer un bug avec apple bugreporter.apple.com Si suffisamment de gens le font, il y a de l'espoir qu'ils nous entendront. La situation actuelle est plutôt décourageante.
William Jockusch

Vous ne pouvez pas utiliser -webkit-min-device-pixel-ratio:? Quant à l'iPhone 4 mobilexweb.com/blog/…
Bgi


1
Hmmm, que diriez-vous de suivre le HIG au lieu d'essayer de le faire? C'est une perte de temps et d'efforts, et cela m'a vraiment rendu malade de lire ceci. Pourquoi les gens ne peuvent-ils pas faire les choses correctement?
Elland

Réponses:


253

Lisez un fichier audio stéréo et comparez la réponse de l'accéléromètre lorsque le volume est élevé sur le canal droit et sur le canal gauche - l'iPad2 avait des haut-parleurs mono tandis que l'iPad Mini a des haut-parleurs stéréo intégrés.

Besoin de votre aide pour collecter les données, visitez cette page et aidez-moi à collecter des données pour cette idée folle. Je n'ai pas d'iPad mini donc j'ai vraiment besoin de votre aide


35
Vous ne pensez pas que l'appareil émettant un son lorsque vous visitez le site Web est une mauvaise idée? Sans oublier que les gens pourraient avoir leur appareil en mode silencieux. Aucun son n'arrêterait cela.
flexd

6
En légère modification: lisez un fichier audio stéréo où le canal droit est une version inversée du canal gauche. Avec un seul haut-parleur, ils doivent annuler et ne pas affecter l'accéléromètre. Mais de toute façon, compter sur des haut-parleurs + accéléromètre n'est pas très fiable.
Kevin Ennis

4
Quelqu'un a vraiment besoin de mettre en œuvre cette solution et d'afficher les résultats.
Stephen Eilert

14
Dans ce sens, sur l'iPad2, qu'est-ce qui new webkitAudioContext().destination.numberOfChannelsrevient?
Douglas

3
@flexd vous ne pensez pas que la détection de périphérique est une mauvaise idée?
Ricardo Tomasi

132

Mise à jour: il semble que ces valeurs indiquent la largeur et la hauteur de la fenêtre d'affichage au moment de la création de l'onglet, et qu'elles ne changent pas lors de la rotation, cette méthode ne peut donc pas être utilisée pour la détection de périphérique !

Vous pouvez utiliser l'un screen.availWidthou l'autre, screen.availHeightcar ils semblent différents pour 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/


3
Jusqu'à présent, cela ressemble à la meilleure solution sans compromis.
Morgan Wilde

Je m'interroge sur cette différence. Je pensais que les deux utilisent la même résolution? Le Chrome de Safari est-il différent sur ces deux appareils?
Marc

10
Il s'agit d'un détecteur du nombre d'onglets ouverts. Sur mon iPad 3, il signale différentes valeurs lorsque j'ai plus d'un robinet ouvert, correspondant aux rapports sur les captures d'écran. La capture d'écran de l'iPad mini a deux onglets ouverts, tandis que la capture de l'iPad 2 n'en a qu'un. Mon iPad 3 signale les valeurs correspondantes lorsque j'ai un ou deux onglets ouverts.
M. Berna

7
Non, ce n'est pas un détecteur du nombre d'onglets ouverts: c'est un détecteur de l'orientation dans laquelle l'appareil était ouvert lorsque l'onglet utilisé pour charger cette page a été "utilisé" pour la première fois. Je ne suis pas certain que ce soit parce que la taille de la fenêtre d'affichage est en fait maintenant fixée à cette valeur après avoir fait pivoter l'onglet, ou si elle est simplement mise en cache incorrectement quelque part, mais si vous vous asseyez et jouez avec plusieurs onglets dans différentes rotations configurations, vous pouvez voir comment il est corrélé. Là où cela devient intéressant, c'est que si vous changez d'onglet, faites pivoter, puis revenez à l'onglet précédent et rechargez, il se met à jour.
Jay Freeman -saurik-

1
Oui, Jay, j'ai fait une erreur similaire, attribuant un résultat à la mauvaise cause. Mais mon point implicite tient, que ce n'est pas un détecteur pour iPad mini, car il donnera des résultats faussement positifs sur d'autres iPads.
M. Berna

84

Je comprends que cela pourrait être une solution peu technologique, mais comme nous ne pouvons pas encore trouver autre chose ..

Je suppose que vous vérifiez déjà la plupart des autres appareils, je vois donc les scénarios suivants possibles.

Vous pouvez vérifier TOUS les appareils les plus populaires qui nécessitent un CSS / dimensionnement spécial, et s'il ne correspond à aucun de ceux-ci, supposez qu'il s'agit d'un iPad mini ou demandez simplement à 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 une approche stupide en ce moment, mais si nous n'avons actuellement aucun moyen de décider si l'appareil est un iPad mini ou un iPad 2 au moins, le site Web sera utilisable avec des appareils iPad mini faisant quelque chose comme ça.

Vous pourriez même aller avec quelque chose comme ça:

"Pour vous offrir la meilleure expérience de navigation possible, nous essayons de détecter votre type d'appareil pour personnaliser le site Web sur votre appareil. Malheureusement, en raison de limitations, cela n'est pas toujours possible et nous ne pouvons pas actuellement déterminer si vous utilisez un iPad 2 ou un iPad. mini en utilisant ces méthodes.

Pour la meilleure expérience de navigation possible, veuillez sélectionner quel appareil vous utilisez ci-dessous.

Ce choix sera enregistré pour les futures visites du site Web sur cet appareil.

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

"

Je ne connais pas très bien ce que vous pouvez et ne pouvez pas faire côté client en Javascript. Je sais que vous pouvez obtenir l'IP d'un utilisateur, mais est-il possible d'obtenir l'adresse mac d'un utilisateur? Ces gammes sont-elles différentes entre iPad2 et iPad mini?


25
Je suis tellement d'accord avec cette solution. Permettre à l'utilisateur de choisir (et éventuellement de changer) son appareil est préférable à l'enfermer dans ce que vous pensez qu'il veut. Si vous pouvez déterminer l'appareil avec assez de précision; utilisez cela par défaut, mais je pense que vous devriez toujours offrir un choix - même s'il est caché dans un menu de paramètres.
Liam Newmarch

2
@LiamNewmarch Je suis également un grand fan de devinettes et d'utilisateurs rapides, plutôt que d'assumer les préférences des utilisateurs et de les verrouiller. Parfois, je veux utiliser le site de bureau sur mon iPad. Normalement, je veux utiliser la version anglaise d'un site, peu importe où la fichue base de données IP-to-Geo dit que je suis actuellement géographiquement localisé! vous avez mon upvote monsieur.
Rebecca

7
Je le déconseille cependant d'utiliser une question contextuelle. faire une bannière comme SO le fait quand il vous connecte automatiquement. Ainsi, l'utilisateur peut simplement lire la page s'il n'a pas envie de répondre, plutôt que d'être forcé de quitter son état d'esprit pour répondre à une question.
Michael Allen

1
En posant la question aux utilisateurs, vous dégrade suffisamment l'expérience utilisateur pour qu'Apple fasse le changement, car c'est quelque chose qui compte beaucoup.
JiminyCricket

9
-1: Je déteste les pages qui me posent des questions lorsque je les visite. Ma réponse: "Peu importe, montrez-moi simplement le contenu!". La différence entre iPad2 et iPad mini n'est pas assez grande (IMnsHO) pour justifier cette approche. JS oui, questions non.
johndodo

74

Je sais que c'est une solution horrible, mais pour le moment, la seule façon de faire la différence entre un iPad Mini et un iPad 2 est de vérifier son numéro de version et de mapper chaque numéro de version avec le périphérique associé.

Permettez-moi de vous donner un exemple: l'iPad mini, version 6.0, expose " 10A406" comme numéro de version, tandis que l'iPad 2 expose ""10A5376e ".

Cette valeur peut être facilement obtenue grâce à une expression régulière sur l'agent utilisateur ( window.navigator.userAgent); ce numéro est préfixé par "Mobile/ ".

Malheureusement, c'est le seul moyen sans équivoque de détecter un iPad Mini; Je suggérerais d'adopter une viewportapproche connexe (lorsqu'elle est prise en charge, en utilisant des unités vh / vw) pour afficher correctement le contenu sur différentes tailles d'écran.


5
Le numéro de version semble être la clé, mais j'ai remarqué que le numéro de version peut varier selon le pays dans lequel l'appareil a été acheté. Par exemple, en Grèce, le numéro de version de l'iPad 2 semble être 10A403 au lieu de 10A5376e, que j'ai également vu des iPad 2 américains. Je suppose que le numéro de version des mini peut également différer.
esjr

67
Cette solution est incorrecte. Pour un certain contexte: le «numéro de build» décrit le système d'exploitation, et non le matériel. Maintenant, si différents appareils avaient toujours des versions de système d'exploitation différentes, ce serait bien, mais cela n'était vrai que dans le passé pour la première version du système d'exploitation fournie avec chaque nouveau périphérique. Dans ce cas, 10A406 est le numéro de version pour 6.0 pour l'iPad Mini, et 10A403 était le numéro de version pour 6.0 pour l'iPad 2 ( pas 10A5376e, qui était 6.0 bêta 4). Cependant, le numéro de version de 6.0.1 sur les deux est déjà 10A523, donc la version actuelle est déjà identique, et les futures versions continueront de l'être.
Jay Freeman -saurik-

1
Je crains que Jay ne soit correct, a vérifié mes données (telles quelles): le numéro de build reflète le système d'exploitation.
esjr

1
Avez-vous essayé ce hack PPI? stackoverflow.com/questions/279749/… - créez essentiellement un élément caché d'une largeur de 1 pouce, puis obtenez la largeur en pixels. Cela devrait résoudre votre problème racine.
JohnLBevan

@JohnLBevan: cela peut résoudre le problème de rendu, mais qu'en est-il des analyses de journaux, etc.? Le problème racine est avec nos amis de Cupertino et la poussée vers des applications «natives».
esjr

69

tl; dr Ne compensez pas la différence entre l'iPad mini et l'iPad 2 à moins que vous ne compensiez également entre les doigts gras et maigres.

Apple semble délibérément essayer de ne pas vous laisser faire la différence. Apple ne semble pas vouloir que nous écrivions un code différent pour les versions de tailles différentes des iPads. Ne faisant pas partie d'Apple moi-même, je n'en suis pas sûr, je dis simplement que c'est à ça que ça ressemble. Peut-être que si la communauté des développeurs propose un détecteur de fantaisie pour iPad mini, Apple pourrait délibérément casser ce détecteur dans les futures versions d'iOS. Apple veut que vous définissiez votre taille cible minimale à 44 points iOS, et iOS affichera cela en deux tailles, la plus grande taille iPad et la plus petite taille iPhone / iPad mini. 44 points, c'est assez généreux, et vos utilisateurs sauront certainement s'ils sont sur le plus petit iPad, ils peuvent donc compenser par eux-mêmes.

Je suggère de revenir à la raison que vous avez indiquée pour demander le détecteur: ajuster la taille de la cible pour le confort de l'utilisateur final. En décidant de concevoir une taille sur le grand iPad et une autre taille sur le petit iPad, vous décidez que toutes les personnes ont les mêmes doigts de taille. Si votre conception est suffisamment serrée pour que la différence de taille entre un iPad 2 et un iPad mini fasse une différence, la taille des doigts entre moi et ma femme fera une plus grande différence. Compensez donc la taille du doigt de l'utilisateur, pas le modèle iPad.

J'ai une suggestion sur la façon de mesurer la taille des doigts. Je suis un développeur iOS natif, donc je ne sais pas si cela peut être accompli en HTML5, mais voici comment je mesurerais la taille du doigt dans une application native. Je demanderais à l'utilisateur de pincer deux objets ensemble, puis de mesurer leur rapprochement. Des doigts plus petits rapprocheront les objets, et vous pouvez utiliser cette mesure pour dériver un facteur d'échelle. Cela ajuste automatiquement la taille de l'iPad. La même personne aura une plus grande mesure des points à l'écran sur un iPad mini que sur un iPad 2. Pour un jeu, vous pouvez appeler cela une étape de calibrage, ou même pas l'appeler. Ayez-le comme une étape de départ. Par exemple, dans un jeu de tir, le joueur met les munitions dans le pistolet avec un mouvement de pincement.


1
Ce premier paragraphe est la bonne réponse. La taille cible recommandée de 44 points est parfaitement fine.
Ricardo Tomasi

Mec, si je n'avais que mille votes de plus à donner. Le premier paragraphe est en effet ça, vous avez gagné l'internet.
Mike

31

Demandez à l'utilisateur de laisser tomber son iPad à plusieurs milliers de pieds au-dessus du sol. Utilisez ensuite l'accéléromètre interne pour mesurer le temps nécessaire à l'iPad pour atteindre la vitesse terminale. Le plus grand iPad a un coefficient de traînée plus élevé et devrait atteindre la vitesse terminale en moins de temps qu'un iPad Mini .

Voici quelques exemples de code pour vous aider à démarrer.

function isIPadMini( var timeToReachTerminalVelocity )
{
    return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}

Vous devez presque certainement revoir ce code lorsque Apple sortira inévitablement le prochain iPad dans un facteur de forme différent. Mais je suis sûr que vous resterez au top des choses et maintiendrez ce hack pour chaque nouvelle version de l'iPad.


Cela ne devrait-il pas être «plus de temps qu'un iPad mini»?
ThomasW

1
Belle ligne de pensée Galileo-ish appliquée à un problème moderne .... Je me demande quelle est la prochaine ..
matanster

2
Pour rendre cela plus fiable, les étuis iPad doivent être retirés avant la chute.
Fuhrmanator

28

Malheureusement, pour l'instant, il semble que ce ne soit pas possible: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Il y a deux jours, j'ai tweeté sur le premier problème détecté: « Il est confirmé que l'iPad Mini User Agent est le même que l'iPad 2 ». J'ai reçu littéralement des centaines de réponses disant que le reniflage d'agent utilisateur est une mauvaise pratique, que nous devons détecter les fonctionnalités et non les appareils, etc., etc.

Eh bien, les gars, vous avez raison, mais cela n'a pas de relation directe avec le problème. Et je dois ajouter la deuxième mauvaise nouvelle: il n'y a pas non plus de technique côté client pour faire la «détection de fonctionnalités» .


8
@ net.uk.sweet - Alors pourquoi ne modifiez-vous pas la réponse et ne corrigez-vous pas les erreurs? Et btw, l'anglais dans le texte cité ne semble pas si mal.
Sandman

@shi comment pouvez-vous savoir que l'auteur de ce texte cité est un italien? Je ne suis pas non plus anglophone. LOL
Toby D

"il n'y a pas de technique côté client pour faire la 'détection des fonctionnalités' non plus" est complètement faux. détection de fonctionnalité ! = détection de périphérique
Ricardo Tomasi

@Mytic Moon Je viens de regarder l'article original qui est lié dans le post ci-dessus où il y a des informations sur l'auteur.
shi

26

Il s'agit d'un tir sauvage, mais l'une des différences entre l'iPad 2 et l'iPad mini est que le premier n'a pas de gyroscope à 3 axes. Il sera peut-être possible d'utiliser l'API d'orientation des périphériques WebKit pour voir quel type d'informations vous pouvez en tirer.

Par exemple, cette page semble suggérer que vous ne pouvez obtenir la rotationRatevaleur que si l'appareil dispose d'un gyroscope.

Désolé, je ne peux pas donner un POC fonctionnel - je n'ai pas accès à un iPad mini. Peut-être que quelqu'un qui en sait un peu plus sur ces API d'orientation peut sonner ici.


3
Ainsi, le site Web d'Apple ne décrit pas le gyroscope sur l'iPad 2 comme un gyroscope "à 3 axes"; mais, quand ils disent "gyroscope", ils signifient un type spécifique de partie (de sorte que les développeurs d'applications développant des jeux qui nécessitent cette partie par la capacité du gyroscope peuvent être assurés qu'elle est là et fonctionnera pour eux). Si vous effectuez une recherche Google sur "" Gyroscope 3 axes "" iPad 2 "", vous trouverez de nombreux articles de fin 2010 et début 2011 expliquant comment l'iPad 2 devrait sortir avec la même partie de gyroscope 3 axes que le L'iPhone 4 avait déjà: quand il est sorti, nous n'avons pas été déçus; P.
Jay Freeman -saurik-

Voici ce sur quoi j'ai basé ma suggestion: apple.com/ipad/ipad-2/specs.html Il ne mentionne aucun gyroscope. Uniquement "accéléromètre". Compte tenu de cela, et du fait que leurs documents semblent suggérer que certains appareils ne prennent en charge qu'un sous-ensemble de l'API motion, cela vaut la peine d'essayer. Je le ferais, si j'avais un iPad mini ...
Assaf Lavie

2
Non, sérieusement: il est écrit "gyroscope" dans la même petite section que "accéléromètre". Je suppose que je peux poster une capture d'écran de la page Web que vous venez de relier avec le mot "gyroscope" en surbrillance, mais vous devriez pouvoir le trouver avec ctrl-F. (modifier: OK, pour la valeur de l'humour, je l'ai fait: i.imgur.com/8BZhx.png <- le voir maintenant ?; P) Quoi qu'il en soit, pour mettre encore plus la différence "gyroscope à 3 axes" au repos, si vous allez aux pages de niveau inférieur qu'Apple conserve pour ce genre de chose comme référence de support historique, vous pouvez voir qu'il dit même spécifiquement "gyroscope à 3 axes". support.apple.com/kb/SP622
Jay Freeman -saurik-

1
Eh bien, il n'est vraiment pas nécessaire de spéculer s'il y a vraiment une différence entre les capacités de l'API de mouvement dans l'iPad mini et l'iPad 2. Il suffit de l'essayer et de le voir. Alors, qui a un iPad mini ici? Quoi qu'il en soit, je suis venu à cette idée en examinant les spécifications techniques des deux appareils et en recherchant les différences qui peuvent être détectées en HTML / JS. Il pourrait également y avoir d'autres différences.
Assaf Lavie

20

Eh bien, l'iPad 2 et l'iPad Mini ont des batteries de tailles différentes.

Si iOS 6 le prend en charge, vous pouvez obtenir le niveau de batterie actuel en 0.0..1.0utilisant window.navigator.webkitBattery.level. À un certain niveau, que ce soit dans le matériel ou le logiciel, cela est probablement calculé comme CurrentLevel / TotalLevel, où les deux sont des pouces. Si c'est le cas, cela se traduira par un flottant qui est un multiple de 1 / TotalLevel. Si vous prenez beaucoup de lectures de niveau de batterie des deux appareils et calculez, battery.level * nvous pourrez peut-être trouver une valeur de n où tous les résultats commencent à être proches des nombres entiers, ce qui vous donnera iPad2TotalLevelet iPadMiniTotalLevel.

Si ces deux nombres sont différents et mutuellement premiers, alors en production, vous pouvez calculer battery.level * iPad2TotalLevelet battery.level * iPadMiniTotalLevel. Celui qui se rapproche le plus d'un entier indiquera quel appareil est utilisé.

Désolé pour le nombre de si dans cette réponse! Espérons que quelque chose de mieux arrivera.


18

EDIT 1: Ma réponse originale, ci-dessous, était «ne le fais pas» Pour être positif:

La vraie question, je pense, n'a rien à voir avec l'iPad X contre l'iPad mini. Je pense qu'il s'agit d'optimiser les dimensions et le placement des éléments de l'interface utilisateur en fonction de l'ergonomie de l'utilisateur. Vous devez déterminer la taille des doigts de l'utilisateur afin de piloter le dimensionnement et, peut-être, le positionnement de votre élément d'interface utilisateur. Ceci, encore une fois, est et devrait probablement être atteint sans avoir besoin de savoir réellement sur quel appareil vous utilisez. Exagérons: votre application s'exécute sur un écran de 40 pouces de diagonale. Je ne connais pas la marque et le modèle ou le DPI. Comment dimensionnez-vous les contrôles?

Vous devez afficher un bouton qui est l'élément de déclenchement dans le site / jeu. Je vous laisse le soin de décider où ou comment il est logique de le faire.

Alors que l'utilisateur verra cela comme un seul bouton, en réalité, il sera composé d'une matrice de petits boutons serrés qui est visuellement recouverte pour apparaître comme une image à bouton unique. Imaginez un bouton de 100 x 100 pixels composé de 400 boutons de 5 x 5 pixels chacun. Vous devez expérimenter pour voir ce qui a du sens ici et la taille de votre échantillonnage.

CSS possible pour le tableau de boutons:

.sense_row {
  width:100px;
  height:5px;
  margin:0;
  padding:0;
}

.sense_button {
  float:left;
  width:3px;
  height:3px;
  padding:0px;
  margin:0px;
  background-color:#FF0;
  border:1px solid #000;
} 

Et le tableau résultant:

tableau de boutons

Lorsque l'utilisateur touche le tableau de boutons, vous obtiendrez effectivement une image de la zone de contact du doigt de l'utilisateur. Vous pouvez ensuite utiliser les critères de votre choix (probablement empiriquement dérivés) afin d'arriver à un ensemble de nombres que vous pouvez utiliser pour mettre à l'échelle et positionner les différents éléments de l'interface utilisateur selon vos besoins.

La beauté de cette approche est que vous ne vous souciez plus du nom ou du modèle d'appareil auquel vous pourriez avoir affaire. Tout ce qui vous importe, c'est la taille du doigt de l'utilisateur par rapport à l'appareil.

J'imagine que ce bouton sense_array pourrait être caché dans le cadre du processus d'entrée dans l'application. Par exemple, s'il s'agit d'un jeu, il y a peut-être un bouton "Jouer" ou divers boutons avec les noms des utilisateurs ou un moyen de sélectionner le niveau auquel ils joueront, etc. Vous avez l'idée. Le bouton sense_array pourrait vivre n'importe où l'utilisateur doit toucher pour entrer dans le jeu.

EDIT 2: juste en notant que vous n'avez probablement pas besoin d'autant de boutons de détection. Un ensemble de cercles concentriques ou de boutons disposés comme un énorme astérisque *pourrait très bien faire l'affaire. Vous devez expérimenter.

Avec mon ancienne réponse, ci-dessous, je vous donne les deux côtés de la médaille.

ANCIENNE RÉPONSE:

La bonne réponse est: ne faites pas ça. C'est une mauvaise idée.

Si vos boutons sont si petits qu'ils deviennent inutilisables sur un mini, vous devez agrandir vos boutons.

Si j'ai appris quoi que ce soit en faisant des applications iOS natives, c'est qu'essayer de déjouer Apple est une formule pour la douleur et l'aggravation indues. S'ils ont choisi de ne pas vous permettre d'identifier l'appareil, c'est parce que, bien, dans leur bac à sable, vous ne devriez pas.

Je me demande, ajustez-vous la taille / l'emplacement en mode portrait ou paysage?


Attendez, avez-vous lu la question? "Certains éléments sont ajustés en taille par rapport à la position du pouce ou du doigt d'un utilisateur"
Christian

Ma question était de savoir si l'OP ajustait ou non les éléments en fonction de l'orientation portrait / paysage. Les navigateurs Web s'ajusteront automatiquement à la largeur supplémentaire du paysage et rendront tout le contenu plus grand que le portrait. J'essaie simplement de souligner que - à moins que vous ne verrouilliez tout - il n'y a presque aucun moyen d'optimiser pour chaque appareil, orientation et utilisateur possible, sauf si vous écrivez une application iOS native. Même alors, vous voudrez peut-être faire attention aux choix que vous faites. Cela pourrait-il être fait à partir d'une application Web et de javascript? Probablement. Je ne pense pas que ce soit une bonne idée.
Martin's

Ah, je vois. Un montage intéressant aussi, serait désireux de voir quelque chose comme ça dans la pratique.
Christian

1
Un «tableau de sens» comme celui-ci fonctionnerait-il même? Je suppose qu'iOS choisirait la cellule la plus proche de l'endroit où l'utilisateur a touché et ne fait que "cliquer" dessus, pas toutes les cellules sous le doigt de l'utilisateur. Si elle a fait le travail, ce serait assez cool putain, cependant.
HellaMad

Aucune raison pour que cela ne fonctionne pas. C'est un tas d'objets qui répondent aux événements tactiles et envoient des messages.
le

11

Qu'en est-il d'un micro-benchmark, calculez quelque chose qui prend environ X microsecondes sur l'iPad 2 et Y sec sur l'iPad mini.

Ce n'est probablement pas assez précis, mais il se peut que la puce de l'iPad mini soit plus efficace.


11

Oui, c'est un bon point pour vérifier le gyroscope. Vous pouvez facilement le faire avec

https://developer.apple.com/documentation/webkitjs/devicemotionevent

ou quelque chose comme

window.ondevicemotion = function(event) {
    if (navigator.platform.indexOf("iPad") != -1 && window.devicePixelRatio == 1) {
        var version = "";
        if (event.acceleration) version = "iPad2";
        else version="iPad Mini";

        alert(version);
    }
    window.ondevicemotion = null;
}​

Je n'ai pas d'iPad pour le tester.


12
Cette solution ne fonctionne pas (testée sur un iPad Mini et un iPad 2: les deux sont détectés comme "iPad2") comme 1) la fonction event.acceleration est conçue pour fonctionner si l'appareil a le gyroscope de fantaisie ou l'accéléromètre un peu plus ancien et 2) selon le site Web d'Apple, l'iPad Mini et l'iPad 2 ont la partie gyroscope de fantaisie, il n'y a donc aucun moyen que le concept de ce chèque ait fonctionné en premier lieu.
Jay Freeman -saurik-

8

Exiger que tous les utilisateurs disposant de l'agent utilisateur iPad2 fournissent une photo à l'aide de l'appareil photo intégré et détectent la résolution à l'aide de l' API de fichier HTML . Les photos de l'iPad Mini auront une résolution plus élevée en raison des améliorations apportées à l'appareil photo.

Vous pouvez également jouer avec la création d'un élément de canevas invisible et le convertir en PNG / JPG à l'aide de l'API Canvas. Je n'ai aucun moyen de le tester, mais les bits résultants peuvent être différents en raison de l'algorithme de compression sous-jacent et de la densité de pixels de l'appareil.


7

Vous pourriez toujours demander à l'utilisateur?!

Si l'utilisateur ne peut pas voir les boutons ou le contenu, donnez-lui un moyen de gérer lui-même la mise à l'échelle. Vous pouvez toujours intégrer des boutons de mise à l'échelle au site pour agrandir / réduire le contenu (texte / boutons). Cela serait (presque) garanti pour fonctionner avec n'importe quelle résolution iPad actuelle et probablement toute résolution future qu'Apple déciderait de faire.


6

Ce n'est pas une réponse à votre question telle que posée, mais j'espère que ce sera plus utile que de dire "ne faites pas ça":

Au lieu de détecter l'iPad Mini, pourquoi ne pas détecter qu'un utilisateur a du mal à frapper le contrôle (ou: frappe constamment dans une sous-région du contrôle), et augmenter / réduire la taille du contrôle pour l'adapter?

Les utilisateurs qui ont besoin de plus gros contrôles les obtiennent indépendamment du matériel; les utilisateurs qui n'ont pas besoin de contrôles plus importants et qui souhaitent voir plus de contenu l'obtiennent également. Ce n'est pas aussi simple que de détecter le matériel, et il y aura des choses subtiles pour bien faire les choses, mais si cela était fait avec soin, cela pourrait être vraiment sympa.


6

Cela me rappelle une citation du film Equilibrium:

"Quelle est, selon vous, la manière la plus simple de retirer une arme d'un clerc de Grammaton?"

"Tu le lui demandes."

Nous sommes tellement habitués à lutter pour des solutions, alors que parfois, il vaut mieux demander. (Il y a de bonnes raisons pour lesquelles nous ne faisons généralement pas cela, mais c'est toujours une option.) Toutes les suggestions ici sont brillantes, mais une solution simple pourrait être de demander à votre programme de demander quel iPad il utilise au démarrage. .

Je sais que c'est une sorte de réponse effrontée, mais j'espère que c'est un rappel que nous ne devons pas nous battre pour tout. (Je me suis préparé pour les downvotes.: P)

Quelques exemples:

  • La détection du clavier pendant les installations du système d'exploitation ne peut parfois pas détecter un clavier spécifique, donc le programme d'installation doit demander.
  • Windows vous demande si un réseau auquel vous vous connectez est un réseau domestique ou un réseau public.
  • Les ordinateurs ne peuvent pas détecter la personne qui est sur le point de l'utiliser, ils ont donc besoin d'un nom d'utilisateur et d'un mot de passe.

Bonne chance - j'espère que vous trouverez une solution géniale! Si ce n'est pas le cas, n'oubliez pas celui-ci.


Ce n'est peut-être pas quelque chose que les utilisateurs non techniques connaissent.
Julian

5

Ne répondant pas à la question, mais à la question derrière la question:

Votre objectif est d'améliorer l'expérience utilisateur sur un écran plus petit. L'apparence des contrôles d'interface utilisateur en fait partie. Une autre partie de UX est la façon dont l'application répond.

Que se passe-t-il si vous rendez la zone qui répond aux taps suffisamment grande pour être conviviale sur l'iPad Mini tout en gardant la représentation visuelle des commandes de l'interface utilisateur suffisamment petite pour être visuellement agréable sur l'iPad?

Si vous avez rassemblé suffisamment de taps qui n'étaient pas dans la zone visuelle, vous pouvez décider de redimensionner visuellement les contrôles de l'interface utilisateur.

En prime, cela fonctionne également pour les grosses mains sur iPad.


5

Toutes les solutions ici ne sont pas évolutives (ce qui empêche Apple de sortir un iPad avec la même taille d'écran que l'iPad 2 mais la même résolution que l'iPad Mini). J'ai donc eu une idée:

Créez un div avec 1 pouce de largeur et ajoutez-le au corps. Ensuite, je crée un autre div avec 100% de largeur et je l'ajoute au corps:

var div1= $("<div/>").appendTo(document.body).width("1in");
var div2= $("<div/>").appendTo(document.body).width("100%");

La fonction jQuery width () renvoie toujours des valeurs en pixels, vous pouvez donc simplement:

var screenSize= div2.width() / div1.width();

screenSize contient maintenant la taille disponible pour l'application en pouces (attention aux erreurs d'arrondi cependant). Vous pouvez l'utiliser pour placer votre interface graphique comme vous l'aimez. N'oubliez pas non plus de supprimer ensuite les div inutiles.

Notez également que l'algorithme proposé par Kaspars non seulement ne fonctionnera pas si l'utilisateur exécute l'application en plein écran, mais il se cassera également si Apple corrige l'interface utilisateur du navigateur.

Cela ne différenciera pas les appareils, mais comme vous l'avez expliqué dans votre modification, ce que vous voulez réellement savoir, c'est la taille de l'écran de l'appareil. Mon idée ne vous indiquera pas non plus exactement la taille de l'écran, mais elle vous donnera des informations encore plus utiles, la taille réelle (en pouces) dont vous disposez pour dessiner votre interface graphique.

EDIT: utilisez ce code pour vérifier s'il fonctionne réellement sur votre appareil. Je ne possède aucun iPad pour le tester.

var div1= $("<div/>").appendTo(document.body).width("1in").height("1in").css("position", "absolute");
var div2= $("<div/>").appendTo(document.body).width("100%").height("100%").css("position", "absolute");
var width= div2.width() / div1.width()
var height= div2.height() / div1.height()
alert(Math.sqrt(width*width + height*height));

Il devrait faire apparaître une fenêtre avec votre taille d'écran en pouces. Il semble fonctionner sur mon ordinateur portable, renvoyant 15,49 alors que mon écran d'ordinateur portable est commercialisé sous 15,4 ''. Quelqu'un peut-il tester cela sur iPad et poster des commentaires s'il vous plaît? N'oubliez pas de l'exécuter en plein écran.

EDIT2: Il s'avère que la page dans laquelle je l'ai testé avait des CSS conflictuels . J'ai corrigé le code de test pour qu'il fonctionne correctement maintenant. Vous avez besoin de position: absolue sur les divs pour pouvoir utiliser la hauteur en%.

EDIT3: J'ai fait quelques recherches, et il semble qu'il n'y ait aucun moyen d'obtenir réellement la taille de l'écran sur n'importe quel appareil. Ce n'est pas quelque chose que l'OS peut savoir. Lorsque vous utilisez une unité du monde réel en CSS, il ne s'agit en fait que d'une estimation basée sur certaines propriétés de votre écran. Inutile de dire que ce n'est pas du tout exact.


L'avez-vous testé? 1 pouce est-il vraiment le même 1 pouce physique sur le Mini et l'iPad? Il est possible que 1 pouce sur le Mini ne s'affiche que comme 1/2 pouce.
Kernel James

Testé sur iPad 2, 3 et Mini. Tous les trois renvoient 3,8125.
Alfred

@AlfredNerstu wow vraiment? Est-ce un bug connu de Safari? Pouvez-vous le tester sur safari pour mac?
Hoffmann

@AlfredNerstu désolé que le code était erroné, je l'ai corrigé maintenant, la page sur laquelle je l'ai testé à l'origine avait des CSS conflictuels qui le faisaient fonctionner un peu. Il s'avère que vous avez besoin de position: absolue sur la div pour utiliser les valeurs de hauteur en%. Maintenant, ce code me donne 15,49 pouces sur mon ordinateur portable 15,4 '' sur une page "propre" (pas de CSS et pas d'éléments en plus des divs).
Hoffmann

J'ai essayé le nouveau code et maintenant tous les 2, 3 et Mini retournent tous en 9.5. J'exécute le code dans un jsfiddle, je ne sais pas si cela pourrait gâcher quelque chose? Le plus probable est peut-être que Safari sur iOS est fait pour l'écran de 9,7 pouces et rend 1 pouce en conséquence?
Alfred

2

Non testé, mais au lieu de lire un fichier audio et de vérifier l'équilibre, cela pourrait fonctionner pour écouter le microphone, extraire le bruit de fond et calculer sa "couleur" (graphique de fréquence). Si l'iPad Mini a un modèle de microphone différent de celui de l'iPad 2, la couleur d'arrière-plan doit être sensiblement différente et certaines techniques de prise d'empreintes audio peuvent vous aider à savoir quel appareil est utilisé.

Je ne pense pas sérieusement que cela pourrait être faisable et en vaut la peine dans ce cas spécifique, mais je pense que les empreintes digitales du bruit de fond pourraient être utilisées dans certaines applications, par exemple pour vous dire où vous êtes lorsque vous êtes à l'intérieur d'un bâtiment.


2

Sur la base de la question de Douglas à propos new webkitAudioContext().destination.numberOfChannelsde l'iPad 2, j'ai décidé d'exécuter des tests.

Vérification de numberOfChannels retourné 2sur iPad mini mais rien sur iPad 2 avec iOS 5 et 2aussi avec iOS 6.

Ensuite, j'ai essayé de vérifier si webkitAudioContext est disponible

var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);​

Il en va de même pour l'iPad Mini et l'iPad 2 avec iOS 6 qui renvoie vrai tandis que l'iPad 2 avec iOS 5 renvoie faux.

(Ce test ne fonctionne pas sur le bureau, pour vérifier si le webkitAudioContext est une fonction).

Voici le code à essayer: http://jsfiddle.net/sqFbc/


2

Que se passe-t-il si vous créez un groupe de divs larges de 1 "x1" et les ajoutez un par un à un div parent jusqu'à ce que le cadre de sélection passe de 1 pouce à 2 pouces? Un pouce sur le mini est de la même taille qu'un pouce sur l'iPad, non?


1
J'ai donc essayé cela, mais sur le mini, un "pouce" est plus petit qu'un "pouce" sur l'iPad normal. Donc, cette façon ne fonctionnera pas.
Scovetta

2

Dans iOS7, il existe un paramètre à l'échelle du système que l'utilisateur peut modifier: lorsque les choses deviennent trop petites pour être lues, le paramètre Taille du texte peut être modifié.

Cette taille de texte peut être utilisée pour former une interface utilisateur de dimensions plausibles, par exemple pour un bouton (testé sur l'iPad Mini Retina pour réagir aux changements de réglage de la taille du texte):

padding: 0.5em 1em 0.5em 1em;
font: -apple-system-body;    

( exemple de bouton CSS, grâce à jsfiddle et cssbuttongenerator)


1

Je détecte l'iPad mini en créant une toile plus grande qu'un iPad mini peut rendre , en remplissant un pixel puis en lisant la couleur. L'iPad mini lit la couleur comme '000000'. tout le reste le rend comme couleur de remplissage.

Code partiel:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);

J'ai besoin de cela pour le dimensionnement de la toile, donc c'est la détection des fonctionnalités dans mon cas d'utilisation.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.