Détecter iPad Mini dans HTML5

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

besoin de votre aide pour recueillir les données s'il vous plaît visitez cette page et aidez-moi à recueillir des données pour cette idée folle. Je n'ai pas d'iPad mini donc j'ai vraiment besoin de votre aide

mise à Jour: Ça ressemble à du ces valeurs 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 les screen.availWidth ou screen.availHeight car ils semblent être 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: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

je comprends que cela puisse être une solution un peu basse technologie, mais puisque nous ne pouvons pas sembler trouver autre chose encore..

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

vous pouvez vérifier tous les appareils les plus populaires possibles qui nécessitent CSS / dimensionnement spécial, et si elle correspond aucun de ceux soit supposer qu'il s'agit d'un mini iPad 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 comme 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 faire quelque chose comme ça.

vous pourriez même aller avec quelque chose comme ceci:

" pour vous donner la meilleure expérience de navigation possible, nous essayons de détecter votre type d'appareil pour personnaliser le site web à votre appareil. Malheureusement en raison de limitations ce 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 obtenir la meilleure expérience de navigation possible, veuillez sélectionner l'appareil que 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 suis pas entièrement familier avec ce que vous pouvez ou ne pouvez pas faire côté client dans Javascript. Je sais que vous pouvez obtenir L'adresse 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?

je sais que c'est une solution horrible, mais pour le moment la seule façon de différencier un iPad Mini et un iPad 2 est de vérifier son numéro de build et mapper chaque numéro de build avec le périphérique correspondant.

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

cette valeur peut être facilement obtenue par un regex sur l'agent utilisateur ( window.navigator.userAgent ); le numéro est préfixé par" Mobile/ ".

malheureusement, c'est la seule façon sans équivoque de détecter un mini iPad; je suggère d'adopter une approche viewport liée (lorsqu'elle est prise en charge, en utilisant des unités vh / vw) pour afficher correctement le contenu sur différentes tailles d'écran.

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 essayer de ne pas vous laisser dire la différence. Apple semble ne pas vouloir que nous écrivions du code différent pour les différentes versions de taille des iPads. Ne pas faire partie D'Apple moi-même, Je ne sais pas cela pour sûr, je dis juste que c'est ce qu'il semble. Peut-être, si la communauté des développeurs vient avec un détecteur de fantaisie pour les mini iPad, Apple pourrait délibérément briser ce détecteur dans les futures versions de iOS. Apple veut que vous définissiez votre taille cible minimum à 44 points iOS, et iOS affichera que dans deux tailles, la plus grande taille de l'iPad et le plus petit iPhone/ipad mini taille. 44 points est assez généreux, et vos utilisateurs sauront certainement s'ils sont sur le plus petit iPad, donc peut compenser sur leur propre.

je vous suggère de revenir à la raison pour laquelle vous avez demandé détecteur: ajustement de la taille de la cible pour le confort de l'utilisateur final. En décidant de concevoir pour une taille sur le grand iPad et une autre taille sur le petit iPad, vous décidez que tous les gens ont la même taille doigts. Si votre design est assez serré que la différence de taille d'un iPad 2 et un iPad mini fait une différence, que la taille des doigts entre moi et ma femme fera une plus grande différence. Donc compenser la taille des doigts de l'Utilisateur, pas le modèle iPad.

j'ai une suggestion sur comment mesurer la taille de doigt. Je suis un développeur natif iOS, donc je ne sais pas si cela peut être accompli avec HTML5, Mais voici comment je pourrais mesurer la taille des doigts dans une application native. J'aurais l'utilisateur de pincement de deux objets ensemble, puis de mesurer à quelle distance ils se rencontrent. Des doigts plus petits rapprocheront les objets, et vous pouvez utiliser cette mesure pour calculer un facteur d'échelle. Cela s'ajuste automatiquement à la taille de l'iPad. La même personne aura une plus grande mesure de points à l'écran 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 ont le joueur met les munitions dans le pistolet avec un mouvement de pincement.

demandez à l'utilisateur de laisser tomber son iPad à plusieurs milliers de pieds au-dessus du sol. Ensuite, utilisez l'accéléromètre pour mesurer le temps qu'il faut pour l'iPad d'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 un exemple de code pour commencer.

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érente. Mais je suis sûr que vous allez rester sur les choses et de maintenir le ce hack pour chaque nouvelle version de l'iPad.

Malheureusement, pour le moment il semble que ce n'est pas possible: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

il y a deux jours, j'ai tweeté à propos du premier problème détecté: " il est confirmé que le Mini Agent utilisateur iPad est le même que l'iPad 2 ". J'ai reçu des centaines de réponses disant que l'agent utilisateur renifler est une mauvaise pratique, que nous devrions détecter les caractéristiques les appareils, etc., etc.

eh Bien oui, les gars, vous avez raison, mais il n'a pas de relation directe avec problème. Et je dois ajouter la deuxième mauvaise nouvelle: il n'y a pas technique côté client pour faire" détection de caractéristique " ni .

c'est un tir sauvage, mais une des différences entre iPad 2 et iPad mini est que le premier n'a pas de gyroscope à 3 axes. Peut-être sera-t-il possible d'utiliser L'API d'orientation de périphérique WebKit pour voir quel type d'information vous pouvez en tirer.

par exemple, cette page semble suggérer que vous ne pouvez obtenir la valeur rotationRate que si l'appareil a un gyroscope.

Désolé Je ne peux pas donner un POC - I de travail Je n'ai pas accès à un mini iPad. Peut-être que quelqu'un qui en sait un peu plus sur ces APIs d'orientation peut venir ici.

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

Si iOS 6 le supporte, Vous pouvez obtenir le niveau de batterie actuel de 0.0..1.0 en utilisant window.navigator.webkitBattery.level . À un certain niveau, que ce soit dans le matériel ou le logiciel , ce qui est probablement calculé comme CurrentLevel / TotalLevel , où les deux sont ents. Si c'est le cas, il en résultera un flotteur qui est un multiple de 1 / TotalLevel . Si vous prenez beaucoup de lectures de niveau de batterie des deux appareils, et calculez battery.level * n vous pourriez être capable de trouver une valeur de n où tous les résultats commencent à être proches des entiers, ce qui vous donnera iPad2TotalLevel et iPadMiniTotalLevel .

si ces deux nombres sont différents, et mutuellement prime, alors dans la production vous pouvez calculer battery.level * iPad2TotalLevel et battery.level * iPadMiniTotalLevel . Celui qui est le plus proche d'un entier indiquera quel périphérique est utilisé.

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

EDIT 1: ma réponse originale, ci-dessous, était"don't do it". Dans l'intérêt d'être positif:

la vraie question, je pense, n'a rien à voir avec l'iPad x vs. iPad mini. Je pense qu'il s'agit d'optimiser les dimensions des éléments de L'interface utilisateur et leur positionnement par rapport à l'ergonomie de l'utilisateur. Vous devez déterminer la taille du (DES) doigt (s) de l'utilisateur afin de piloter le dimensionnement et, peut-être, le positionnement de votre élément de L'interface utilisateur. Cela, encore une fois, est et devrait probablement être arrivé at sans avoir besoin de savoir réellement sur quel périphérique vous êtes en cours d'exécution. Exagérons: votre application fonctionne sur un écran diagonal de 40 pouces. Je ne connais pas la marque et le modèle ou le DPI. Comment dimensionner les commandes?

vous devez afficher un bouton qui est l'élément de blocage dans le site/jeu. Je vous laisse décider où et comment faire.

alors que l'utilisateur le verra comme un simple bouton, en réalité il sera composé de une matrice de petits boutons étroitement emballés qui est visuellement couvert pour apparaître comme une image d'un seul bouton. 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 à quel point votre échantillonnage doit être petit.

CSS Possible pour 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 qui en résulte:

Lorsque l'utilisateur touche le tableau de boutons que vous obtiendrez, effectivement, une image de la zone de contact du doigt de l'utilisateur. Vous pouvez alors utiliser tous les critères que vous voulez (probablement empiriquement dérivé) afin d'arriver à un ensemble de nombres que vous pouvez utiliser pour mettre à l'échelle et positionner les divers éléments D'UI selon vos exigences.

la beauté de cette approche est que vous ne vous souciez plus du nom ou du modèle d'appareil avec lequel vous pourriez avoir affaire. Tout ce qui vous intéresse est la taille du doigt de l'utilisateur dans 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, si c'est un jeu, il y a peut-être un bouton "Play" ou plusieurs boutons avec le nom de l'utilisateur ou un moyen de sélectionner le niveau qu'ils vont jouer, etc. Vous obtenez l'idée. Le bouton sense_array peut vivre n'importe où que l'utilisateur doit toucher pour entrer dans le jeu.

EDIT 2: Just notant que vous n'avez probablement pas besoin de beaucoup de sens boutons. Un ensemble de cercles concentriques ou des boutons disposés comme un énorme astérisque * pourrait très bien faire. Vous avez à l'expérience.

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 cela. C'est une mauvaise idée.

Si vos boutons sont si petits qu'ils devenir inutilisable sur une mini vous avez besoin de faire vos boutons plus grand.

si j'ai appris quoi que ce soit en faisant des applications natives iOS c'est que d'essayer de surpasser Apple est une formule pour la douleur indue et l'aggravation. 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, est-ce que vous ajustez la taille/l'emplacement du portrait par rapport au paysage?

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

http://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceMotionEventClassRef/DeviceMotionEvent/DeviceMotionEvent.html

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;

}

N'ont pas d'iPads pour le tester.

Qu'en est-il d'un micro benchmark, calculez 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 pourrait y avoir quelques instructions la puce de l'iPad mini est plus efficace à.

exige de tous les utilisateurs avec l'agent utilisateur iPad2 de fournir une photo en utilisant la caméra intégrée et de détecter la résolution en utilisant le API de fichier HTML . iPad Mini photos sera plus haute résolution en raison des améliorations de l'appareil photo.

vous pouvez également jouer avec la création d'un élément invisible canvas, et le convertir en PNG/JPG en utilisant L'API Canvas. Je n'ai aucun moyen de le tester, mais les bits qui en résultent pourrait être différent en raison de l'algorithme de compression sous-jacent et la densité du pixel de l'appareil.

, Vous pouvez toujours demander à l'utilisateur?!

si L'utilisateur ne peut pas voir les boutons ou le contenu, alors lui donner un moyen de gérer la mise à l'échelle eux-mêmes. Vous pouvez toujours ajouter des boutons de mise à l'échelle au site pour rendre le contenu (texte/boutons) plus grand / plus petit. Cela serait (presque) garanti pour fonctionner pour n'importe quelle résolution iPad actuelle et probablement n'importe quelle résolution future apple décide qu'ils veulent faire.

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

au lieu de détecter l'iPad Mini, pourquoi ne pas détecter qu'un utilisateur a du mal à frapper la commande (ou: frappe régulièrement dans une sous-région de la commande), et augmenter / réduire la taille de la commande pour les accommoder?

les utilisateurs qui ont besoin de plus gros contrôles les obtiennent quel que soit le matériel; les utilisateurs qui n'ont pas besoin des contrôles plus grands et veulent voir plus de contenu obtenir que trop. Ce n'est pas aussi simple que de détecter le matériel, et il y aura des choses subtiles à corriger, mais si cela était fait avec soin, ça pourrait être vraiment sympa.

cela me rappelle une citation du film Equilibrium:

"Ce que, diriez-vous, est le moyen le plus facile d'obtenir une arme à l'écart à partir d'un Grammaton Clerc?"

" vous lui demandez."

nous sommes tellement habitués à nous battre pour des solutions, quand parfois, il peut être préférable de 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 génial, mais une solution simple pourrait être de demander à votre programme quel iPad ils utilisent quand ils le démarrent.

je sais que c'est un peu un coup de répondre, mais j'espère que c'est un rappel que nous n'avons pas à lutter pour tout. (Je me suis préparé pour les descentes. : P)

quelques exemples:

• détection de clavier pendant les installations OS parfois ne peut pas détecter un clavier spécifique, donc l'installateur doit demander.
• Windows demande si un réseau auquel vous vous connectez à 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 exigent donc un nom d'utilisateur et un mot de passe.

le Meilleur de la chance - j'espère que vous trouverez une super solution! Si vous ne le faites pas, n'oubliez pas celui-ci.

de ne Pas répondre à la question, mais la question derrière la question:

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

Que faire si vous faites la zone qui répond aux robinets assez grand pour être convivial sur l'iPad Mini tout en gardant la représentation visuelle des contrôles UI suffisamment petit pour être visuellement agréable sur l'iPad?

si vous avez accumulé assez de robinets qui n'étaient pas dans la zone visuelle, vous pouvez décider de dimensionner visuellement les commandes de L'interface utilisateur.

en bonus, cela fonctionne aussi pour de grandes mains sur iPad.

toutes les solutions ici ne sont pas à l'épreuve du futur (ce qui empêche Apple de libérer un iPad avec la même taille d'écran que l'iPad 2, mais la même résolution que l'iPad Mini). Alors j'ai eu une idée:

créer un div avec une largeur de 1 pouce et l'ajouter au corps. Puis je crée un autre div avec une largeur de 100% et l'ajoute au corps:

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

La fonction

jQuery width() retourne toujours les valeurs en pixels de sorte que vous pouvez juste:

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

screenSize tient maintenant la taille disponible pour l'application en pouces (attention arrondi erros cependant). Vous pouvez utiliser ça pour placer votre interface graphique comme vous l'aimez. Et n'oubliez pas d'enlever les divs inutiles après.

également noter 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 patches L'interface utilisateur du navigateur.

cela ne différenciera pas les appareils, mais comme vous l'avez expliqué dans votre edit ce que vous voulez réellement savoir est la taille de l'écran de l'appareil. Mon idée ne vous dira pas non plus exactement la taille de l'écran, mais elle vous donnera une information encore plus utile, la taille réelle (en pouces) que vous avez Disponible pour dessiner votre interface graphique.

EDIT: Utilisez ce code pour vérifier si cela fonctionne sur votre appareil. Je n'ai pas d'iPads 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 apparaître une fenêtre avec votre screensize en pouces. Il semble fonctionner sur mon ordinateur portable, de retour 15.49 alors que mon écran d'ordinateur portable est commercialisé comme 15.4". Quelqu'un peut le tester sur ipad et poster des commentaires s'il vous plaît? N'oubliez pas d'exécuter en plein écran.

EDIT2: il s'avère que la page dans laquelle je l'ai testé avait quelque conflit CSS . J'ai corrigé le code de test pour fonctionner correctement maintenant. Vous avez besoin de position: absolute sur les divs donc vous pouvez utiliser la hauteur en %.

Edit 3: 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 dans CSS, c'est en fait juste une estimation basée sur certaines propriétés de votre écran. Inutile de dire que ce n'est pas précis du tout.

non testé, mais au lieu de lire un fichier audio et de vérifier le solde, il pourrait fonctionner à écouter le microphone, extraire le bruit de fond, et calculer sa "couleur" (graphique de fréquence). Si IPad Mini a un modèle de microphone différent de IPad 2, alors leur couleur de fond devrait être sensiblement différente et certaines techniques d'empreinte audio pourraient vous aider à savoir quel appareil est utilisé.

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

basé sur Douglas question sur new webkitAudioContext().destination.numberOfChannels sur iPad 2 j'ai décidé de faire quelques tests.

Vérification numberOfChannels retourné 2 de l'iPad mini, mais rien sur l'iPad 2 avec iOS 5 et 2 ainsi avec iOS 6.

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

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

même ici iPad Mini et iPad 2 avec iOS 6 renvoie true tandis que iPad 2 avec IOS 5 renvoie true faux.

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

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

Que faire si vous avez créé un groupe de divs larges de 1"x1" et les avez annexés un par un à un div parent jusqu'à ce que la boîte bondissant de 1 pouce à 2 pouces? Un pouce sur la mini est de la même taille qu'un pouce sur l'iPad, Non?

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

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

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

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

je détecte l'iPad mini en créant une toile qui est plus grande un iPad mini peut rendre , remplir un pixel puis lire la couleur de retour. L'iPad mini lit la couleur comme '000000'. tout le reste est rendu comme la 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'en ai besoin pour le dimensionnement de la toile donc c'est la détection des caractéristiques dans mon étui d'utilisation.