Détecter l'iPad Mini en HTML5

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.

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

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/

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?

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.

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.

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.

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» .

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.

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.

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:

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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/

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?

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)

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.