L'iPad Mini d'Apple est un clone plus petit de l'iPad 2 à plus d'un titre que nous le souhaiterions. En JavaScript, l'objet window.navigator
expose les mêmes valeurs que 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 des 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, la taille de certains éléments est ajustée par rapport à la position du pouce ou du doigt de l'utilisateur. Par conséquent, nous pouvons vouloir redimensionner certaines images ou certains boutons pour offrir une meilleure expérience utilisateur.
Les choses que j'ai essayées jusqu'à présent (y compris des approches assez évidentes):
window.devicepixelratio
resolution
et -webkit-device-pixel-ratio
)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 reçues jusqu'à présent. J'aimerais commenter les personnes qui votent contre la détection de l'iPad mini par rapport à Apple a euh, un guide pour les gouverner tous. Ok, voici mon raisonnement qui explique pourquoi je pense qu'il est tout à fait logique de savoir si une personne utilise un iPad mini ou un 2. Et faites 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 un usage différent. L'iPad 2 est généralement tenu à deux mains lorsque vous jouez, sauf si vous êtes Chuck Norris . La mini est plus petite, mais elle est aussi beaucoup plus légère et permet un jeu où vous la tenez dans une main et utilisez une autre pour balayer, taper ou autre chose. En tant que concepteur et développeur de jeux, je voudrais simplement savoir s'il s'agit d'un mini afin que je puisse choisir de fournir au joueur un autre schéma de contrôle si Je veux (par exemple après un test A/B avec un groupe de joueurs).
Pourquoi? Eh bien, il est prouvé que la majorité des utilisateurs ont tendance à utiliser les paramètres par défaut, aussi laissez-vous de côté une vignette virtuelle et placez un autre contrôle à l'écran tactile (en donnant juste un exemple arbitraire ici) lorsque le lecteur charge le Pour la première fois, le jeu est ce que moi-même et probablement d’autres concepteurs de jeux aimerions pouvoir faire.
Donc, à mon humble avis, cela va au-delà des discussions épineuses/directives et n’est que quelque chose que Apple et que 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 instructions .
Jouez 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 dispose de haut-parleurs mono alors que l'iPad Mini possède des haut-parleurs stéréo intégrés.
Vous avez besoin de votre aide pour rassembler les données, visitez la page cette page et aidez-moi à recueillir des données pour cette idée folle. Je n'ai pas d'iPad mini, j'ai donc vraiment besoin de votre aide
Mise à jour: il ressemble à ces valeurs indiquent la largeur et la hauteur de la fenêtre d'affichage au moment de la création de l'onglet, et elles ne t changer lors de la rotation, donc cette méthode ne peut 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.
screen.availWidth = 768
screen.availHeight = 1004
screen.availWidth = 748
screen.availHeight = 1024
Source: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/
Je comprends que cette solution est peut-être un peu à la pointe de la technologie, mais comme nous ne semblons pas pouvoir proposer autre chose pour le moment.
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 le plus souvent un CSS/dimensionnement, et s’il ne correspond à aucun de ceux-ci, supposons qu’il s’agisse d’un iPad mini ou que vous 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 à l’heure actuelle, mais si nous n’avons actuellement aucun moyen de décider si l’appareil est un iPad mini ou un iPad 2, le site Web sera au moins utilisable avec des appareils iPad mini effectuant quelque chose comme ceci.
Vous pourriez même aller avec quelque chose comme ça:
"Afin de vous offrir la meilleure expérience de navigation possible, nous essayons de détecter le type de votre appareil afin de personnaliser le site Web pour votre appareil. Malheureusement, cela n’est pas toujours possible, et nous ne pouvons pas déterminer si vous utilisez un iPad 2 ou un iPad. mini en utilisant ces méthodes.
Pour une expérience de navigation optimale, veuillez sélectionner le périphérique que vous utilisez ci-dessous.
Ce choix sera stocké pour les visites futures sur le site Web sur cet appareil.
[] iPad 2
[*] iPad mini
[] Ancient blackberry device
"
Je ne suis pas tout à fait au courant de ce que vous pouvez et ne pouvez pas faire côté client en 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 cette solution est horrible, mais pour le moment, le seul moyen de différencier un iPad Mini d'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é.
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 expression rationnelle sur l'agent utilisateur (window.navigator.userAgent
); ce numéro est préfixé par "Mobile/
".
Malheureusement, il s’agit du seul moyen sans équivoque de détecter un iPad Mini; Je suggérerais d'adopter une approche liée à viewport
(si elle est prise en charge, en utilisant les unités vh/vw) pour afficher correctement le contenu sur différentes tailles d'écran.
tl; dr Ne compensez pas la différence entre iPad mini et iPad 2, à moins que vous ne compensiez également entre des doigts gras et maigres.
Apple semble délibérément essayer de ne pas vous laisser faire la différence. Apple semble ne pas vouloir que nous écrivions un code différent pour les versions de différentes tailles d'iPad. Ne faisant pas partie de Apple moi-même, je ne le sais pas avec certitude, je dis simplement que c'est ce à quoi il ressemble. Peut-être que, si la communauté des développeurs propose un détecteur de fantaisie pour iPad mini, Apple peut délibérément détruire ce détecteur dans les futures versions d'iOS. Apple souhaite que vous définissiez votre taille cible minimale à 44 points iOS. IOS l'affichera en deux tailles, la plus grande pour iPad et la plus petite pour iPhone/iPad mini. 44 points, c'est très généreux, et vos utilisateurs sauront s'ils sont sur l'iPad plus petit et peuvent donc compenser seuls.
Je suggère de revenir à la raison pour laquelle vous avez demandé 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 doigts de la même taille. Si votre conception est suffisamment étroite pour que la différence de taille entre un iPad 2 et un iPad mini fasse la différence, la taille des doigts entre moi et ma femme fera une plus grande différence. Donc, compensez 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 réalisé en HTML5, mais voici comment je mesurerais la taille du doigt dans une application native. Je voudrais que l'utilisateur pince deux objets ensemble, puis mesure à quelle distance ils se rapprochent. De plus petits doigts rapprochent les objets et vous pouvez utiliser cette mesure pour obtenir un facteur de mise à l'échelle. Cela s'adapte automatiquement à la taille de l'iPad. La même personne aura une mesure plus grande des points à l'écran sur un iPad mini que sur un iPad 2. Pour un jeu, vous pouvez appeler cela une étape de calibrage, voire ne pas l'appeler. Avoir comme une étape de départ. Par exemple, dans un jeu de tir, le joueur place les munitions dans le pistolet avec un pincement.
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 limite. Le plus grand iPad a un coefficient de traînée plus élevé et devrait atteindre sa vitesse limite en moins de temps qu'un iPad Mini .
Voici un exemple de code pour vous aider à démarrer.
function isIPadMini( var timeToReachTerminalVelocity )
{
return (timeToReachTerminalVelocity > IPAD_MINI_THRESHOLD);
}
Il est presque certainement nécessaire de revoir ce code lorsque Apple publie inévitablement le prochain iPad sous un facteur de forme différent. Mais je suis sûr que vous resterez au courant des choses et que vous maintiendrez ce hack pour chaque nouvelle version de l'iPad.
Malheureusement, pour le moment, il semble que cela ne soit 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 l'agent d'utilisateur pour iPad Mini est identique à l'iPad 2 “ . J'ai reçu littéralement des centaines de réponses disant que le sniffing d'agent utilisateur est une mauvaise pratique, qu'il faut détecter les fonctionnalités et non les périphériques, etc.
Eh bien oui les gars, vous avez raison, mais cela n’a aucun rapport direct avec le problème. Et j’ai besoin d’ajouter la deuxième mauvaise nouvelle: il n’existe pas de technique côté client permettant d’effectuer la "détection de fonctionnalité" ni non plus .
C'est un coup 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. Peut-être qu’il sera 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 est équipé d'un gyroscope.
Désolé, je ne peux pas donner un POC en état de fonctionnement. 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 donner son avis 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 auprès de 0.0..1.0
à l'aide de window.navigator.webkitBattery.level
. À un certain niveau, que ce soit en matériel ou en logiciel, cela est probablement calculé comme suit: CurrentLevel / TotalLevel
, où les deux sont des ints. Si tel est le cas, cela donnera un float multiple de 1 / TotalLevel
. Si vous prenez beaucoup de mesures de niveau de batterie sur les deux appareils et calculez battery.level * n
, vous pourrez peut-être trouver une valeur de n où tous les résultats commencent à être proches des nombres entiers, ce qui vous donnera iPad2TotalLevel
et iPadMiniTotalLevel
.
Si ces deux nombres sont différents et se complètent mutuellement, alors en production, vous pouvez calculer battery.level * iPad2TotalLevel
et battery.level * iPadMiniTotalLevel
. Celui qui est le plus proche d'un nombre entier indiquera quel périphérique est utilisé.
Désolé pour le nombre de si dans cette réponse! Espérons que quelque chose de mieux va venir.
EDIT 1: Ma réponse originale, ci-dessous, était "ne le fais pas". Dans l'intérêt d'être positif:
Je pense que la vraie question n'a rien à voir avec l'iPad X vs iPad mini. Je pense qu'il s'agit d'optimiser les dimensions des éléments d'interface utilisateur et de les adapter à l'ergonomie de l'utilisateur. Vous devez déterminer la taille du/des doigt (s) de l'utilisateur afin de déterminer la taille 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 périphérique vous travaillez. 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, ni le DPI. Comment dimensionner les contrôles?
Vous devez afficher un bouton qui constitue l'élément de déclenchement dans le site/le jeu. Je vous laisse le soin de décider où et comment il est logique de le faire.
Alors que l’utilisateur le verra comme un bouton unique, il sera en réalité composé d’une matrice de petits boutons très compacts recouverte visuellement 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 est logique ici et à quel point votre échantillonnage doit être petit.
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 de l'utilisateur. Vous pouvez ensuite utiliser le critère de votre choix (probablement dérivé de manière empirique) pour obtenir un ensemble de nombres que vous pouvez utiliser pour mettre à l'échelle et positionner les divers éléments de l'interface utilisateur en fonction de vos besoins.
La beauté de cette approche réside dans le fait que vous ne vous souciez plus de quel nom d'appareil ou de modèle vous pourriez avoir affaire. Tout ce qui vous importe est la taille du doigt de l'utilisateur par rapport à l'appareil.
J'imagine que ce bouton sense_array pourrait être masqué dans le cadre du processus de saisie dans l'application. Par exemple, s’il s’agit d’un jeu, il existe peut-être un bouton "Lecture" ou plusieurs boutons portant le nom de l’utilisateur ou un moyen de sélectionner le niveau auquel il va jouer, etc. Vous avez l’idée. Le bouton sense_array peut vivre n'importe où l'utilisateur doit toucher pour entrer dans le jeu.
EDIT 2: Notez juste que vous n’avez probablement pas besoin de autant de boutons de sens. Un ensemble de cercles ou de boutons concentriques disposés comme un énorme astérisque *
pourrait suffire. Vous devez expérimenter.
Avec mon ancienne réponse, ci-dessous, je vous présente les deux côtés de la médaille.
ANCIENNE RÉPONSE:
La bonne réponse est: ne fais pas ça. C'est une mauvaise idée.
Si vos boutons sont si petits qu'ils deviennent inutilisables sur une mini, vous devez agrandir vos boutons.
Si j’ai appris quoi que ce soit en faisant des applications iOS natives, c’est que tenter de déjouer Apple est une formule qui permet d’endurer mal et d’aggraver les choses. S'ils choisissent de ne pas vous permettre d'identifier le périphérique, c'est parce que, dans leur bac à sable, vous ne devriez pas.
Je me demande si vous ajustez la taille/l'emplacement en mode portrait/paysage.
Que diriez-vous d’un micro-repère, 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 la puce de l'iPad mini est peut-être 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;
}
Ne pas avoir d'iPad pour le tester.
Demander à tous les utilisateurs de l'agent utilisateur iPad2 de fournir une photo à l'aide de l'appareil photo intégré et de détecter la résolution à l'aide de HTML File API . Les photos de l'iPad Mini auront une résolution supérieure 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 un fichier PNG/JPG à l'aide de l'API Canvas. Je n'ai aucun moyen de le tester, mais les bits résultants pourraient être différents en raison de l'algorithme de compression sous-jacent et de la densité de pixels du périphérique.
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 la mise à l'échelle eux-mêmes. Vous pouvez toujours créer des boutons de mise à l'échelle sur le site pour rendre le contenu (texte/boutons) plus grand/plus petit. Cela serait (presque) garanti pour fonctionner avec n’importe quelle résolution actuelle de l’iPad et probablement pour toute résolution future Apple décider ce qu’ils veulent faire.
Ce n'est pas une réponse à votre question, mais j'espère que ce sera plus utile que de dire "ne fais pas ça":
Au lieu de détecter l'iPad Mini, pourquoi ne pas détecter qu'un utilisateur a des difficultés à 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 contrôles plus importants les obtiennent indépendamment du matériel. les utilisateurs qui n’ont pas besoin de commandes plus volumineuses et qui souhaitent voir plus de contenu obtiennent également cette information. Il ne s’agit pas simplement de détecter le matériel, et il y aura certaines choses subtiles à corriger, mais si cela était fait avec soin, cela pourrait être vraiment agréable.
Cela me rappelle une citation du film Equilibrium:
"Quel est, diriez-vous, le moyen le plus facile d'obtenir une arme d'un clerc de Grammaton?"
"Tu le lui demandes."
Nous sommes tellement habitués à nous battre pour des solutions, alors que parfois, il peut être préférable de demander. (Il y a de bonnes raisons pour lesquelles nous ne le faisons généralement pas, mais c'est toujours une option.) Toutes les suggestions présentées 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 réponse plutôt effrontée, mais j'espère que cela nous rappellera que nous ne devons pas nous battre pour tout. (Je me suis préparé pour les votes négatifs.: P)
Quelques exemples:
Bonne chance, j'espère que vous trouverez une solution géniale! Si vous ne le faites pas, n'oubliez pas celui-ci.
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 plus petit. L'apparence des contrôles de l'interface utilisateur en est une partie. Une autre partie de l'UX est la façon dont l'application répond.
Que faire si la zone qui répond aux taps est suffisamment grande pour être conviviale sur l'iPad Mini tout en conservant une représentation visuelle des commandes de l'interface utilisateur suffisamment petite pour être agréable à regarder sur l'iPad?
Si vous avez rassemblé suffisamment de prises qui ne se trouvaient pas dans la zone visuelle, vous pouvez décider de redimensionner visuellement les contrôles de l'interface utilisateur.
En prime, cela fonctionne aussi pour les grandes mains sur iPad.
Toutes les solutions proposées ici ne sont pas pérennes (ce qui empêche Apple de libérer un iPad avec la même taille d'écran que l'iPad 2 mais avec la même résolution que l'iPad Mini). Alors j'ai eu une idée:
Créez une div de 1 pouce de largeur et ajoutez-la au corps. Ensuite, je crée une autre div avec 100% de largeur et l'ajoute au corps:
var div1= $("<div/>").appendTo(document.body).width("1in");
var div2= $("<div/>").appendTo(document.body).width("100%");
la fonction width () de jQuery renvoie toujours les valeurs en pixels pour que vous puissiez simplement:
var screenSize= div2.width() / div1.width();
screenSize contient maintenant la taille disponible pour l'application en pouces (attention cependant aux erreurs d'arrondis). Vous pouvez l'utiliser pour placer votre interface graphique à votre guise. N'oubliez pas non plus de supprimer les divs inutiles par la suite.
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 l'édition, ce que vous voulez réellement connaître 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 vous donnera une information encore plus utile, la taille réelle (en pouces) dont vous disposez pour dessiner votre interface graphique.
EDIT: Utilisez ce code pour vérifier si cela fonctionne réellement sur votre appareil. Je ne possède pas d'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 ouvrir une fenêtre avec votre taille d'écran en pouces. Il semble fonctionner sur mon ordinateur portable, en retournant 15.49 alors que l’écran de mon ordinateur portable est commercialisé au format 15.4 ''. Quelqu'un peut-il tester cela sur iPad et poster des commentaires s'il vous plaît? N'oubliez pas de le lancer en plein écran.
EDIT2: Il s'avère que la page dans laquelle je l'ai testée présentait des conflits CSS . J'ai corrigé le code de test pour qu'il fonctionne correctement maintenant. Vous avez besoin de position: absolute sur les divs pour pouvoir utiliser la hauteur en%.
EDIT3: J'ai fait des recherches et il semble qu'il n'y ait aucun moyen d'obtenir la taille de l'écran sur un périphérique. 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.
Sur la base de Douglas question sur new webkitAudioContext().destination.numberOfChannels
sur iPad 2, j'ai décidé de lancer des tests.
Vérification du nombre de canaux renvoyés 2
sur iPad mini, mais rien sur iPad 2 avec iOS 5 et 2
aussi bien avec iOS 6.
Ensuite, j'ai essayé de vérifier si webkitAudioContext est disponible
var hasWebkitAudio = typeof(webkitAudioContext) === "object";
alert(hasWebkitAudio);
Idem ici iPad Mini et iPad 2 avec iOS 6 renvoie true, tandis que iPad 2 avec iOS 5 renvoie false.
(Ce test ne fonctionne pas sur le bureau, pour vérifier si webkitAudioContext est une fonction).
Voici le code que vous pouvez essayer: http://jsfiddle.net/sqFbc/
Non testé, mais au lieu de jouer un fichier audio et de vérifier la balance, cela pourrait fonctionner d'écouter le microphone, d'extraire le bruit de fond et de calculer sa "couleur" (graphe de fréquence). Si l'IPad Mini a un modèle de microphone différent de l'IPad 2, leur couleur d'arrière-plan doit être sensiblement différente et certaines techniques de prise d'empreinte audio peuvent vous aider à déterminer le périphérique utilisé.
Je ne pense pas sérieusement que cela pourrait être faisable et que cela en valait la peine dans ce cas particulier, mais je pense que empreintes digitales du bruit de fond pourrait être utilisé dans certaines applications, par exemple pour vous dire où vous vous trouvez quand vous le souhaitez. sont à l'intérieur d'un bâtiment.
Dans iOS7, il existe un paramètre à l’échelle du système qui permet à l’utilisateur d’ajuster: 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 ex. pour un bouton (testé sur iPad Mini Retina pour réagir aux modifications du réglage de la taille du texte):
padding: 0.5em 1em 0.5em 1em;
font: -Apple-system-body;
( exemple bouton CSS, grâce à jsfiddle et cssbuttongenerator)
Que se passe-t-il si vous créez un groupe de div de 1 "x1" de large et que vous les annexez un à un à un parent jusqu'à ce que le cadre de sélection passe de 1 à 2 pouces? Un pouce sur le mini est la même taille qu'un pouce sur l'iPad, non?
Je détecte l'iPad mini en créant une toile qui est plus grande qu'un rendu d'iPad mini peut rendre , en remplissant un pixel, puis en lisant la couleur. L'iPad mini lit la couleur en tant que "000000". tout le reste le rend 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'ai besoin de ceci pour le dimensionnement de la toile, donc c'est la détection de fonctionnalité dans mon cas d'utilisation.