[javascript] Détecter l'iPad Mini en HTML5


Answers

Mise à jour: Il semble que ces valeurs signalent la largeur et la hauteur de la fenêtre 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 screen.availWidth ou screen.availHeight car ils semblent différents pour iPad Mini et iPad 2.

ipad mini

screen.availWidth = 768
screen.availHeight = 1004

ipad 2

screen.availWidth = 748
screen.availHeight = 1024

Source: konstruktors.com/blog/web-design/…

Question

Apple iPad Mini est un plus petit clone de l'iPad 2 de plusieurs façons que nous le souhaiterions. En JavaScript, l'objet window.navigator expose les mêmes valeurs pour le Mini et l'iPad 2. Mes tests jusqu'ici pour détecter la différence n'ont pas abouti.

Pourquoi est-ce important?

Comme les écrans iPad Mini et 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 fonction de la position du pouce ou du doigt de l'utilisateur. Par conséquent, nous souhaitons mettre à l'échelle certaines images ou boutons pour améliorer l'expérience utilisateur.

Les choses que j'ai essayé jusqu'ici (y compris certaines approches assez évidentes):

  • window.devicepixelratio
  • Largeur de l'élément CSS en cm
  • Requêtes multimédia CSS (telles que resolution et -webkit-device-pixel-ratio )
  • Dessins SVG dans des unités similaires
  • Faire toutes sortes de transformations de 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 fraîche d'idées. Et vous?

Mise à jour Merci pour les réponses à ce jour. Je voudrais commenter sur les gens qui votent contre la détection d'iPad mini contre 2 comme Apple a eu, une directive pour les gouverner tous. D'accord, voici mon raisonnement pourquoi je pense que cela a vraiment du sens dans le monde de savoir si une personne utilise un iPad mini ou un 2. Et faire de 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 aussi beaucoup plus léger et permet un gameplay où vous le tenez dans une main et utilisez un autre pour faire glisser ou tapoter ou autres joyeusetés. En tant que concepteur de jeux et développeur moi-même, j'aimerais simplement savoir si c'est un mini-jeu, donc je peux choisir de fournir au joueur un contrôleur 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 prouvé que la majorité des utilisateurs ont tendance à aller avec les paramètres par défaut, laissant ainsi un pouce virtuel et mettant un autre contrôle basé sur l'écran (donnant juste un exemple arbitraire ici) lorsque le joueur charge le jeu pour la première fois est ce que je, et probablement d'autres concepteurs de jeux, aimerais pouvoir faire.

Donc, à mon humble avis cela va au-delà des discussions doigts / lignes directrices et est juste quelque chose qu'Apple et tous les autres fournisseurs doivent faire: nous permettre d'identifier votre appareil de façon unique et penser différemment au lieu de suivre les directives.




Ceci est un tir sauvage, mais l'une des différences entre iPad 2 et 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 le type d'informations que vous pouvez en obtenir.

Par exemple, cette page semble indiquer que vous ne pouvez obtenir la valeur rotationRate que si l'appareil est équipé 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 entrer ici.




Vous pouvez toujours demander à l'utilisateur ?!

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




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

Ce n'est probablement pas assez précis, mais il y a peut-être des instructions pour que la puce de l'iPad mini soit plus efficace.




All solutions here are not future-proof (what prevents Apple from releasing an iPad with the same screen size as the iPad 2 but same resolution as the iPad Mini). So I came up with an idea:

Create a div with 1 inch width and append it to the body. Then I create another div with 100% width and append it to the body:

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

jQuery width() function always returns values in pixels so you can just:

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

screenSize now holds the size available to the application in inches (beware rounding erros though). You can use that to place your GUI the way you like it. Also don't forget to remove the useless divs afterwards.

Also note that the algorithm proposed by Kaspars not only will not work if the user runs the application as full screen, but it will also break if Apple patches the browser UI.

This won't differentiate the devices, but as you explained in your edit what you actually wants to know is the device screen size. My idea will also not tell you exactly the screen size, but it will give you an even more useful information, the actual size (in inches) that you have available to draw your GUI.

EDIT: Use this code to check if it actually works on your device. I don't own any iPads to test it on.

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));

It should popup a window with your screensize in inches. It seems to work on my laptop, returning 15.49 while my laptop screen is marketed as 15.4''. Can anyone test this on iPads and post comments please? Don't forget to run it full screen.

EDIT2: It turns out that the page I tested it in had some conflicting CSS . I fixed the test code to work properly now. You need position: absolute on the divs so you can use height in %.

EDIT3: I did some research, and it seems there is no way to actually get the size of the screen on any device. It's not something the OS can know. When you use a real world unit in CSS it is actually just an estimation based on some properties of your screen. Needless to say that this is not accurate at all.




Cela me rappelle une citation du film Equilibrium:

"Qu'est-ce, diriez-vous, est le moyen le plus facile d'éloigner une arme d'un Clerc Grammaton?"

"Vous lui demandez."

Nous sommes tellement habitués à nous battre pour trouver des solutions, 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 sont brillantes, mais une solution simple pourrait être de demander à votre programme quel iPad il utilise lorsqu'il démarre. .

Je sais que c'est une réponse un peu effrontée, mais j'espère que c'est un rappel que nous n'avons 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, l'installateur doit donc le 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 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 vous ne le faites pas, n'oubliez pas celui-ci.




Demandez à l'utilisateur de déposer 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 finale. 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 avez presque certainement besoin de revoir ce code quand Apple libère 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 maintenez le bidouillage pour chaque nouvelle version de l'iPad.




Je sais que c'est une solution horrible, mais à l'heure actuelle, la seule façon de différencier un iPad Mini d'un iPad 2 est de vérifier son numéro de build et de cartographier chaque numéro de build avec le périphérique associé.

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

Cette valeur peut être facilement obtenue via une regex sur l'agent utilisateur ( window.navigator.userAgent ); ce numéro est préfixé avec " Mobile/ ".

Malheureusement, c'est le seul moyen sans équivoque de détecter un iPad Mini; Je suggère d'adopter une approche liée à la viewport affichage (si elle est supportée, en utilisant des unités vh / vw) pour afficher correctement le contenu sur différentes tailles d'écran.




EDIT 1: Ma réponse originale, ci-dessous, était "ne le fais pas". Dans le but d'être positif:

La vraie question, je pense, n'a rien à voir avec l'iPad X par rapport à l'iPad mini. Je pense qu'il s'agit d'optimiser les dimensions des éléments de l'interface utilisateur et leur positionnement en fonction de l'ergonomie de l'utilisateur. Vous devez déterminer la taille du / des doigt (s) de l'utilisateur afin de déterminer le dimensionnement de votre élément d'interface utilisateur et, éventuellement, son positionnement. Ceci, encore une fois, est et devrait probablement être obtenu sans avoir besoin de savoir réellement quel appareil vous utilisez. Exagérons: Votre application fonctionne 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 vais laisser à vous de décider où et comment cela a du sens 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 couverte pour apparaître comme une seule image de bouton. Imaginez un bouton de 100 x 100 pixels composé de 400 boutons, chacun de 5 x 5 pixels. Vous devez expérimenter pour voir ce qui a du sens ici et combien petit votre échantillonnage doit être.

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:

Lorsque l'utilisateur touche le tableau de boutons, vous obtiendrez une image de la zone de contact du doigt de l'utilisateur. Vous pouvez ensuite utiliser les critères que vous souhaitez (probablement empiriquement dérivés) afin d'obtenir 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 de l'appareil ou du modèle avec lequel vous traitez. Tout ce qui vous intéresse, 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 le nom de l'utilisateur ou un moyen de sélectionner le niveau auquel ils vont jouer, etc. Vous avez l'idée. Le bouton sense_array peut être placé n'importe où dans l'utilisateur pour entrer dans le jeu.

EDIT 2: Notez simplement que vous n'avez probablement pas besoin de tant de boutons de détection. Un ensemble de cercles ou de boutons concentriques disposés comme un astérisque * peut très bien faire l'affaire. Vous devez expérimenter.

Avec ma vieille réponse, ci-dessous, je vous donne les deux côtés de la pièce.

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 à faire 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, vous ajustez la taille / emplacement dans le portrait contre le paysage?




In iOS7 there is a system-wide setting user can tweak: when things become too small to read, Text Size setting can be changed.

That text size can be used to form UI of plausible dimensions, eg for a button (tested on iPad Mini Retina to react to Text Size setting changes):

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

( sample bouton CSS, grâce à jsFiddle et cssbuttongenerator)




Based on Douglas question about new webkitAudioContext().destination.numberOfChannels on iPad 2 I decided to run some tests.

Checking numberOfChannels returned 2 on iPad mini but nothing on iPad 2 with iOS 5 and 2 as well with iOS 6.

Then I tried to check if webkitAudioContext is available

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

Same here iPad Mini and iPad 2 with iOS 6 returns true while iPad 2 with iOS 5 returns false.

(This test don't work on desktop, for desktop check if webkitAudioContext is a function).

Here's the code for you to try out: http://jsfiddle.net/sqFbc/




Links