Rileva iPad Mini in HTML5

L'iPad Mini di Apple è un clone più piccolo dell'iPad 2 in più modi di quanto vorremmo. In JavaScript, l' window.navigatoroggetto espone gli stessi valori per Mini e iPad 2. I miei test finora per rilevare la differenza non hanno portato al successo.

Perché questo è importante?

Poiché gli schermi iPad Mini e iPad 2 sono identici in pixel ma variano in dimensioni reali (pollici / centimetri), variano in PPI (pixel per pollice).

Affinché le applicazioni Web e i giochi offrano un'interfaccia utente intuitiva, alcuni elementi sono regolati in termini di dimensioni in relazione alla posizione del pollice o delle dita di un utente, quindi, potremmo voler ridimensionare determinate immagini o pulsanti per offrire una migliore esperienza utente.

Cose che ho provato finora (compresi alcuni approcci piuttosto ovvi):

• window.devicepixelratio
• Larghezza dell'elemento CSS in unità di cm
• Query multimediali CSS (come resolutione -webkit-device-pixel-ratio)
• Disegni SVG in unità simili
• Fare tutti i tipi di trasformazioni CSS del webkit per un tempo prestabilito e contare i frame renderizzati requestAnimFrame(speravo di rilevare una differenza misurabile)

Sono fresco di idee. E tu?

Aggiornamento Grazie per le risposte finora. Vorrei commentare le persone che votano contro il rilevamento di iPad mini contro 2 poiché Apple ha uhm, una linea guida per dominarli tutti. Ok, ecco il mio ragionamento sul perché ritengo che abbia davvero senso nel mondo sapere se una persona sta usando un iPad mini o un 2. E con il mio ragionamento cosa ti piace.

L'iPad mini non è solo un dispositivo molto più piccolo (9,7 pollici contro 7,9 pollici), ma il suo fattore di forma consente un uso diverso. L'iPad 2 di solito viene tenuto con due mani durante il gioco a meno che tu non sia Chuck Norris . Il mini è più piccolo, ma è anche molto più leggero e consente il gameplay in cui lo si tiene in una mano e ne si utilizza un altro per scorrere o toccare o quant'altro. Come progettista e sviluppatore di giochi, vorrei solo sapere se è un mini, quindi posso scegliere di fornire al giocatore un diverso schema di controllo, se lo desidero (ad esempio dopo un test A / B con un gruppo di giocatori).

Perché? Bene, è un dato di fatto che la maggior parte degli utenti tende ad andare con le impostazioni predefinite, quindi tralasciando una levetta virtuale e mettendo sullo schermo qualche altro controllo basato sul tocco (solo facendo un esempio arbitrario qui) quando il giocatore carica il il gioco per la prima volta è ciò che io, e probabilmente altri progettisti di giochi, mi piacerebbe poter fare.

Quindi IMHO va oltre le discussioni spesse / linee guida ed è solo qualcosa che Apple e tutti gli altri fornitori dovrebbero fare: permetterci di identificare in modo univoco il tuo dispositivo e pensare diversamente invece di seguire le linee guida.

Riproduci un file audio stereo e confronta la risposta dell'accelerometro quando il volume è alto sul canale destro e sul canale sinistro - iPad2 aveva altoparlanti mono mentre iPad Mini ha altoparlanti stereo integrati.

Hai bisogno del tuo aiuto per raccogliere i dati, visita questa pagina e aiutami a raccogliere i dati per questa folle idea. Non ho un iPad mini, quindi ho davvero bisogno del tuo aiuto

Aggiornamento: sembra che questi valori riportino la larghezza e l'altezza della finestra al momento della creazione della scheda e non cambino al momento della rotazione, quindi questo metodo non può essere utilizzato per il rilevamento del dispositivo !

Puoi utilizzare l'uno screen.availWidtho l'altro screen.availHeightcome sembrano essere diversi per iPad Mini e iPad 2.

Ipad mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

Fonte: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/

Capisco che questa potrebbe essere una soluzione un po 'a bassa tecnologia, ma dal momento che non possiamo ancora pensare ad altro.

Presumo che tu abbia già verificato la maggior parte degli altri dispositivi, quindi vedo i seguenti scenari possibili.

È possibile verificare TUTTI i possibili dispositivi più popolari che richiedono un dimensionamento / CSS speciale e se non corrisponde a nessuno di questi, si supponga che sia un iPad mini o semplicemente si chieda all'utente?

// 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.
}

So che in questo momento potrebbe sembrare un approccio stupido, ma se attualmente non abbiamo modo di decidere se il dispositivo è un iPad mini o un iPad 2, almeno il sito Web sarà utilizzabile con i dispositivi iPad mini che fanno qualcosa del genere.

Potresti persino scegliere qualcosa del genere:

"Per offrirti la migliore esperienza di navigazione possibile, proviamo a rilevare il tuo tipo di dispositivo per personalizzare il sito Web in base al tuo dispositivo. Purtroppo a causa di limitazioni ciò non è sempre possibile e al momento non siamo in grado di determinare se usi un iPad 2 o un iPad mini usando questi metodi.

Per la migliore esperienza di navigazione possibile, seleziona il dispositivo che stai utilizzando di seguito.

Questa scelta verrà memorizzata per future visite al sito Web su questo dispositivo.

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

"

Non ho la completa familiarità con ciò che puoi e non puoi fare sul lato client in Javascript. So che puoi ottenere l'IP di un utente, ma è possibile ottenere l'indirizzo mac di un utente? Queste gamme differiscono tra iPad2 e iPad mini?

So che è una soluzione orribile, ma al momento l'unico modo per distinguere tra un iPad Mini e un iPad 2 è controllare il suo numero di build e mappare ogni numero di build con il dispositivo correlato.

Lasciatemi fare un esempio: iPad mini, versione 6.0, espone " 10A406" come numero di build, mentre iPad 2 espone " 10A5376e".

Questo valore può essere facilmente ottenuto tramite una regex sul programma utente ( window.navigator.userAgent); quel numero è preceduto da " Mobile/".

Purtroppo questo è l'unico modo inequivocabile per rilevare un iPad Mini; Suggerirei di adottare un viewportapproccio correlato (ove supportato, utilizzando unità vh / vw) per visualizzare correttamente i contenuti su schermi di dimensioni diverse.

tl; dr Non compensare la differenza tra iPad mini e iPad 2 a meno che non compensi anche le dita grasse e magre.

Sembra che Apple stia deliberatamente cercando di non farti dire la differenza. Apple sembra non volerci scrivere un codice diverso per le diverse versioni di iPad. Non essendo parte di Apple, non lo so per certo, sto solo dicendo che è così che sembra. Forse, se la comunità degli sviluppatori presenta un fantastico rivelatore per mini iPad, Apple potrebbe deliberatamente rompere quel rilevatore nelle future versioni di iOS. Apple vuole che imposti la dimensione minima del tuo obiettivo su 44 punti iOS e iOS lo mostrerà in due dimensioni, la dimensione più grande dell'iPad e la dimensione più piccola dell'iPhone / iPad. 44 punti sono molto generosi e i tuoi utenti sapranno sicuramente se si trovano sull'iPad più piccolo, quindi possono compensare da soli.

Suggerisco di tornare alla ragione dichiarata per richiedere il rilevatore: regolare le dimensioni dell'obiettivo per il comfort dell'utente finale. Decidendo di progettare per una dimensione sull'iPad di grandi dimensioni e un'altra per l'iPad di piccole dimensioni, stai decidendo che tutte le persone hanno le stesse dimensioni delle dita. Se il tuo design è abbastanza stretto che la differenza di dimensioni tra un iPad 2 e un iPad mini fa la differenza, la dimensione delle dita tra me e mia moglie farà una differenza più grande. Quindi compensa la dimensione del dito dell'utente, non il modello di iPad.

Ho un suggerimento su come misurare la dimensione del dito. Sono uno sviluppatore iOS nativo, quindi non so se questo può essere realizzato in HTML5, ma ecco come misurare la dimensione del dito in un'app nativa. Avrei l'utente pizzicare due oggetti insieme, quindi misurare quanto si avvicinano. Dita più piccole avvicinano gli oggetti e puoi usare questa misura per ricavare un fattore di ridimensionamento. Questo si adatta automaticamente alle dimensioni dell'iPad. La stessa persona avrà una misurazione più grande dei punti sullo schermo su un iPad mini che su un iPad 2. Per un gioco puoi chiamarlo passo di calibrazione o addirittura non chiamarlo. Fallo come punto di partenza. Ad esempio, in una partita di tiro il giocatore mette le munizioni nella pistola con un movimento pizzicotto.

Chiedi all'utente di far cadere l'iPad da diverse migliaia di piedi da terra. Quindi utilizzare l'accelerometro interno per misurare il tempo impiegato dall'iPad per raggiungere la velocità del terminale. L'iPad più grande ha un coefficiente di resistenza maggiore e dovrebbe raggiungere la velocità del terminale in meno tempo di un iPad Mini .

Ecco un codice di esempio per iniziare.

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

È quasi certamente necessario rivisitare questo codice quando Apple inevitabilmente rilascia il prossimo iPad in un fattore di forma diverso. Ma sono sicuro che rimarrai aggiornato e manterrai questo hack per ogni nuova versione dell'iPad.

Sfortunatamente, al momento sembra che ciò non sia possibile: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Due giorni fa, ho twittato il primo problema rilevato: " È stato confermato che l'iPad Mini User Agent è uguale all'iPad 2 ". Ho ricevuto letteralmente centinaia di risposte dicendo che lo sniffing dell'agente utente è una cattiva pratica, che dovremmo rilevare funzionalità non dispositivi, ecc. Ecc.

Beh sì ragazzi, avete ragione, ma non ha una relazione diretta con il problema. E ho bisogno di aggiungere la seconda brutta notizia: non esiste una tecnica lato client per effettuare il "rilevamento di funzionalità" .

Questo è uno scatto selvaggio, ma una delle differenze tra iPad 2 e iPad mini è che il primo non ha un giroscopio a 3 assi. Forse sarà possibile utilizzare l'API di orientamento del dispositivo WebKit per vedere che tipo di informazioni è possibile ottenere da esso.

Ad esempio, questa pagina sembra suggerire che puoi ottenere il rotationRatevalore solo se il dispositivo ha un giroscopio.

Mi dispiace non posso dare un POC funzionante - Non ho accesso a un iPad mini. Forse qualcuno che conosce un po 'di più su queste API di orientamento può venire qui.

Bene, l'iPad 2 e l'iPad Mini hanno batterie di dimensioni diverse.

Se iOS 6 lo supporta, puoi ottenere il livello corrente della batteria 0.0..1.0dall'uso window.navigator.webkitBattery.level. Ad un certo livello in hardware o software, questo è probabilmente calcolato come CurrentLevel / TotalLevel, dove entrambi sono ints. In tal caso, ciò comporterà un float che è un multiplo di 1 / TotalLevel. Se prendi molte letture del livello della batteria da entrambi i dispositivi e calcoli battery.level * npotresti essere in grado di trovare un valore di n in cui tutti i risultati iniziano a essere vicini agli interi, che ti daranno iPad2TotalLevele iPadMiniTotalLevel.

Se quei due numeri sono diversi e si innescano a vicenda, nella produzione è possibile calcolare battery.level * iPad2TotalLevele battery.level * iPadMiniTotalLevel. Qualunque sia il più vicino a un numero intero indicherà quale dispositivo viene utilizzato.

Mi dispiace per il numero di if in questa risposta! Speriamo che arrivi qualcosa di meglio.

EDIT 1: La mia risposta originale, di seguito, era "non farlo". Nell'interesse di essere positivi:

La vera domanda, penso, non ha nulla a che fare con l'iPad X contro l'iPad mini. Penso che si tratti di ottimizzare le dimensioni e il posizionamento degli elementi dell'interfaccia utente in base all'ergonomia dell'utente. È necessario determinare la dimensione del dito / i dell'utente al fine di determinare il dimensionamento e, forse, il posizionamento dell'elemento dell'interfaccia utente. Questo, di nuovo, è e dovrebbe probabilmente essere raggiunto senza la necessità di sapere effettivamente su quale dispositivo si sta eseguendo. Esageriamo: la tua app è in esecuzione su uno schermo diagonale da 40 pollici. Non conosco la marca e il modello o il DPI. Come si dimensionano i controlli?

Devi visualizzare un pulsante che è l'elemento di gate nel sito / gioco. Lascio a te decidere dove o come ha senso farlo.

Mentre l'utente vedrà questo come un singolo pulsante, in realtà sarà composto da una matrice di piccoli pulsanti ben confezionati che è visivamente coperto per apparire come un'immagine a pulsante singolo. Immagina un pulsante da 100 x 100 pixel composto da 400 pulsanti, ciascuno da 5 x 5 pixel. Devi sperimentare per vedere cosa ha senso qui e quanto piccolo deve essere il tuo campionamento.

Possibile CSS per array di pulsanti:

.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;
} 

E l'array risultante:

Quando l'utente tocca l'array di pulsanti, otterrai effettivamente un'immagine dell'area di contatto del dito dell'utente. È quindi possibile utilizzare qualsiasi criterio desiderato (probabilmente derivato empiricamente) per arrivare a un insieme di numeri che è possibile utilizzare per ridimensionare e posizionare i vari elementi dell'interfaccia utente in base alle proprie esigenze.

Il bello di questo approccio è che non ti importa più di quale nome dispositivo o modello potresti avere a che fare. Tutto ciò che ti interessa è la dimensione del dito dell'utente in relazione al dispositivo.

Immagino che questo pulsante sense_array possa essere nascosto come parte del processo di accesso all'applicazione. Ad esempio, se si tratta di un gioco, forse c'è un pulsante "Gioca" o vari pulsanti con i nomi dell'utente o un mezzo per selezionare il livello a cui giocheranno, ecc. Hai l'idea. Il pulsante sense_array potrebbe vivere ovunque l'utente debba toccare per entrare nel gioco.

EDIT 2: Solo notando che probabilmente non hai bisogno di tanti pulsanti di rilevamento. Una serie di cerchi concentrici o pulsanti disposti come un enorme asterisco *potrebbe andare bene. Devi sperimentare.

Con la mia vecchia risposta, di seguito, ti sto dando entrambi i lati della medaglia.

VECCHIA RISPOSTA:

La risposta giusta è: non farlo. È una cattiva idea.

Se i tuoi pulsanti sono così piccoli da diventare inutilizzabili su un mini, devi ingrandirli.

Se ho imparato qualcosa nel fare app iOS native è che cercare di superare in astuzia Apple è una formula per il dolore e l'aggravamento indebiti. Se hanno scelto di non permetterti di identificare il dispositivo è perché, beh, nella loro sandbox, non dovresti.

Mi chiedo, stai regolando le dimensioni / posizione in verticale rispetto al paesaggio?

Che dire di un micro benchmark, calcola qualcosa che impiega all'incirca X microsecondi su iPad 2 e Y sec su iPad mini.

Probabilmente non è abbastanza preciso, ma potrebbero esserci alcune istruzioni per cui il chip dell'iPad mini è più efficiente.

Sì, è un buon punto per controllare il giroscopio. Puoi farlo facilmente con

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

o qualcosa del genere

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;
}​

Non hai iPad per provarlo.

Richiedi a tutti gli utenti con l'agente utente iPad2 di fornire una foto utilizzando la fotocamera integrata e di rilevare la risoluzione utilizzando l' API del file HTML . Le foto dell'iPad Mini avranno una risoluzione maggiore a causa dei miglioramenti apportati alla fotocamera.

Puoi anche giocare con la creazione di un elemento canvas invisibile e convertirlo in un PNG / JPG utilizzando l'API Canvas. Non ho modo di testarlo, ma i bit risultanti potrebbero essere diversi a causa dell'algoritmo di compressione sottostante e della densità di pixel del dispositivo.

Potresti sempre chiedere all'utente ?!

Se l'utente non riesce a vedere i pulsanti o il contenuto, allora dai loro un modo per gestire autonomamente il ridimensionamento. Puoi sempre inserire alcuni pulsanti di ridimensionamento nel sito per ingrandire / ridurre il contenuto (testo / pulsanti). Questo sarebbe (quasi) garantito per funzionare con qualsiasi risoluzione attuale dell'iPad e probabilmente tutte le future risoluzioni Apple decideranno di voler fare.

Questa non è una risposta alla tua domanda come posta, ma spero che sarà più utile che dire "non farlo":

Invece di rilevare l'iPad Mini, perché non rilevare che un utente ha difficoltà a colpire il controllo (o: sta colpendo costantemente in una sottoregione del controllo) e aumentare / ridurre le dimensioni del controllo per adattarlo?

Gli utenti che hanno bisogno di controlli più grandi li ottengono indipendentemente dall'hardware; gli utenti che non hanno bisogno di controlli più grandi e vogliono vedere più contenuti ottengono anche quello. Non è semplice come rilevare solo l'hardware, e ci saranno alcune cose sottili da fare bene, ma se fosse fatto con cura potrebbe essere davvero bello.

Questo mi ricorda una citazione del film Equilibrium:

"Qual è, diresti, il modo più semplice per allontanare un'arma da un chierico dei Grammaton?"

"Glielo chiedi."

Siamo così abituati a cercare soluzioni, quando a volte può essere meglio chiedere. (Ci sono buone ragioni per cui di solito non lo facciamo, ma è sempre un'opzione.) Tutti i suggerimenti qui sono brillanti, ma una soluzione semplice potrebbe essere quella di chiedere al tuo programma di chiedere quale iPad stanno usando quando lo avviano .

So che questa è una specie di risposta sfacciata, ma spero sia un promemoria che non dobbiamo lottare per tutto. (Mi sono preparato per i voti negativi: P)

Qualche esempio:

• Il rilevamento della tastiera durante le installazioni del sistema operativo a volte non è in grado di rilevare una tastiera specifica, quindi il programma di installazione deve chiedere.
• Windows chiede se una rete a cui ci si connette è una rete domestica o una rete pubblica.
• I computer non sono in grado di rilevare la persona che sta per usarlo, quindi richiedono un nome utente e una password.

Buona fortuna - spero che tu possa trovare una soluzione fantastica! Se non lo fai, però, non dimenticare questo.

Non rispondere alla domanda, ma alla domanda dietro la domanda:

Il tuo obiettivo è migliorare l'esperienza dell'utente su uno schermo più piccolo. L'aspetto dei controlli dell'interfaccia utente è una parte di esso. Un'altra parte di UX è il modo in cui l'applicazione risponde.

Che cosa succede se l'area che risponde ai tocchi è abbastanza grande da essere facile da usare su iPad Mini mantenendo la rappresentazione visiva dei controlli dell'interfaccia utente abbastanza piccola da essere visivamente piacevole su iPad?

Se hai raccolto abbastanza tocchi che non si trovavano nell'area visiva, puoi decidere di ridimensionare visivamente i controlli dell'interfaccia utente.

Come bonus, questo funziona anche per grandi mani su iPad.

Tutte le soluzioni qui non sono a prova di futuro (ciò che impedisce ad Apple di rilasciare un iPad con le stesse dimensioni dello schermo dell'iPad 2 ma la stessa risoluzione dell'iPad Mini). Quindi mi è venuta un'idea:

Crea un div con 1 pollice di larghezza e aggiungilo al corpo. Quindi creo un altro div con una larghezza del 100% e lo aggiungo al corpo:

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

La funzione jQuery width () restituisce sempre valori in pixel in modo da poter semplicemente:

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

screenSize ora mantiene la dimensione disponibile per l'applicazione in pollici (attenzione però agli errori di arrotondamento). Puoi usarlo per posizionare la tua GUI nel modo che preferisci. Inoltre, non dimenticare di rimuovere in seguito i div inutili.

Inoltre, l'algoritmo proposto da Kaspars non funzionerà solo se l'utente esegue l'applicazione a schermo intero, ma si romperà anche se Apple corregge l'interfaccia utente del browser.

Ciò non differenzierà i dispositivi, ma come spiegato nella modifica ciò che realmente vuoi sapere è la dimensione dello schermo del dispositivo. La mia idea non ti dirà esattamente le dimensioni dello schermo, ma ti darà informazioni ancora più utili, le dimensioni effettive (in pollici) che hai a disposizione per disegnare la tua GUI.

EDIT: utilizzare questo codice per verificare se funziona davvero sul dispositivo. Non possiedo alcun iPad su cui provarlo.

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

Dovrebbe apparire una finestra con il tuo formato in pollici. Sembra funzionare sul mio laptop, restituendo 15,49 mentre lo schermo del mio laptop è commercializzato come 15,4 ''. Qualcuno può testarlo su iPad e pubblicare commenti per favore? Non dimenticare di eseguirlo a schermo intero.

EDIT2: Si scopre che la pagina in cui l'ho provato aveva alcuni CSS contrastanti . Ho corretto il codice di test per funzionare correttamente ora. Hai bisogno di una posizione: assoluta sui div in modo da poter usare l'altezza in%.

EDIT3: ho fatto alcune ricerche e sembra che non ci sia modo di ottenere effettivamente le dimensioni dello schermo su qualsiasi dispositivo. Non è qualcosa che il sistema operativo può sapere. Quando si utilizza un'unità del mondo reale nei CSS, in realtà è solo una stima basata su alcune proprietà dello schermo. Inutile dire che questo non è affatto preciso.

Non testato, ma invece di riprodurre un file audio e controllare il bilanciamento, potrebbe funzionare per ascoltare il microfono, estrarre il rumore di fondo e calcolare il suo "colore" (grafico della frequenza). Se IPad Mini ha un modello di microfono diverso da IPad 2, il colore di sfondo dovrebbe essere misurabile in modo diverso e alcune tecniche di impronte digitali audio potrebbero aiutarti a capire quale dispositivo è in uso.

Non penso seriamente che potrebbe essere fattibile e valga la pena in questo caso specifico, ma penso che l' impronta digitale del rumore di fondo possa essere utilizzata in alcune app, ad esempio per dirti dove sei quando ti trovi all'interno di un edificio.

Sulla base della domanda di Douglasnew webkitAudioContext().destination.numberOfChannels sull'iPad 2, ho deciso di eseguire alcuni test.

Verifica del numero di canali restituiti 2su iPad mini ma nulla su iPad 2 con iOS 5 e 2anche con iOS 6.

Quindi ho provato a verificare se webkitAudioContext è disponibile

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

Lo stesso qui iPad Mini e iPad 2 con iOS 6 restituiscono true mentre iPad 2 con iOS 5 restituisce false.

(Questo test non funziona sul desktop, per verificare se webkitAudioContext è una funzione).

Ecco il codice per provare: http://jsfiddle.net/sqFbc/

Che cosa succede se hai creato un gruppo di div 1 "x1" larghi e li hai aggiunti uno per uno a un div genitore fino a quando il rettangolo di selezione è passato da 1 pollice a 2 pollici? Un pollice sul mini ha le stesse dimensioni di un pollice sull'iPad, giusto?

In iOS7 esiste un'impostazione a livello di sistema che l'utente può modificare: quando le cose diventano troppo piccole per essere lette, l' impostazione della Dimensione del testo può essere modificata.

Quella dimensione del testo può essere utilizzata per formare un'interfaccia utente di dimensioni plausibili, ad esempio per un pulsante (testato su iPad Mini Retina per reagire alle modifiche alle impostazioni della dimensione del testo):

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

( pulsante di esempio CSS, grazie a jsfiddle e cssbuttongenerator)

Sto rilevando l'iPad mini creando una tela più grande che può essere visualizzata da un iPad mini , riempiendo un pixel e leggendo il colore. L'iPad mini legge il colore come "000000". tutto il resto lo rende come colore di riempimento.

Codice parziale:

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

Ho bisogno di questo per il dimensionamento della tela, quindi è il rilevamento delle caratteristiche nel mio caso d'uso.