javascript - Rileva iPad Mini in HTML5



svg (16)

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 da 0.0..1.0 utilizzando window.navigator.webkitBattery.level . A un certo livello in hardware o software, è probabile che sia calcolato come CurrentLevel / TotalLevel , dove entrambi sono inte. Se è così, ciò si tradurrà in un float che è un multiplo di 1 / TotalLevel . Se prendi molte letture del livello della batteria da entrambi i dispositivi e calcoli battery.level * n potresti trovare un valore di n in cui tutti i risultati iniziano ad essere vicini ai numeri interi, il che ti darà iPad2TotalLevel e iPadMiniTotalLevel .

Se quei due numeri sono diversi e reciprocamente primi, allora in produzione puoi calcolare battery.level * iPad2TotalLevel e battery.level * iPadMiniTotalLevel . Qualunque sia più vicino a un intero indicherà quale dispositivo è in uso.

Mi dispiace per il numero di ifs in questa risposta! Speriamo che qualcosa di meglio arriverà.

https://ffff65535.com

L'iPad Mini di Apple è un clone più piccolo di iPad 2 in più modi di quanto vorremmo. In JavaScript, l'oggetto window.navigator 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 di iPad Mini e iPad 2 sono identici in pixel ma variano in dimensioni reali (pollici / centimetri), variano in PPI (pixel per pollice).

Per le applicazioni web e i giochi per offrire un'interfaccia utente amichevole, alcuni elementi sono regolati in termini di dimensioni rispetto alla posizione di un pollice o di un dito dell'utente, quindi, potremmo voler ridimensionare determinate immagini o pulsanti per fornire un'esperienza utente migliore.

Cose che ho provato fino ad ora (compresi alcuni approcci piuttosto ovvi):

  • window.devicepixelratio
  • Larghezza elemento CSS in cm unità
  • Query multimediali CSS (come resolution e -webkit-device-pixel-ratio )
  • Disegni SVG in unità simili
  • Esecuzione di tutti i tipi di trasformazioni Webkit CSS per un tempo prestabilito e il conteggio dei frame requestAnimFrame rendering con requestAnimFrame (speravo di rilevare una differenza misurabile)

Sono fresco senza idee. E tu?

Aggiornamento Grazie per le risposte finora. Vorrei commentare le persone che hanno votato contro l'individuazione dell'iPad mini contro 2 come Apple ha uhm, una linea guida per dominarle tutte. Ok, ecco il mio ragionamento per cui penso che abbia davvero senso al mondo sapere se una persona sta usando un iPad mini o un 2. E fai il mio ragionamento su ciò che 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 utilizzo diverso. L'iPad 2 viene solitamente 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 usi un altro per scorrere o toccare o whatnot. Come progettista e sviluppatore di giochi, vorrei solo sapere se si tratta di un mini, quindi posso scegliere di fornire al giocatore un campo di controllo diverso se lo desidero (ad esempio dopo un test A / B con un gruppo di giocatori).

Perché? Beh, è ​​un fatto provato che la maggior parte degli utenti tende ad andare con le impostazioni predefinite, quindi tralasciare una levetta virtuale e mettere qualche altro controllo basato sul tocco sullo schermo (dando solo un esempio arbitrario qui) quando il giocatore carica il il gioco per la prima volta è ciò che io, e probabilmente altri game designer, mi piacerebbe poter fare.

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


Capisco che questa potrebbe essere una soluzione un po 'low-tech, ma dal momento che non riesco a trovare qualcos'altro ancora ..

Suppongo che tu controlli già la maggior parte degli altri dispositivi, quindi vedo i seguenti scenari possibili.

È possibile controllare TUTTI i possibili dispositivi più popolari che richiedono CSS / dimensionamento speciale e, se non corrisponde a nessuno di questi, si presume che sia un iPad mini o semplicemente chiedere 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 potrebbe sembrare un approccio stupido in questo momento, ma se al momento non abbiamo modo di decidere se il dispositivo è un iPad mini o un iPad 2 almeno il sito web sarà utilizzabile con i mini dispositivi iPad che fanno qualcosa del genere.

Potresti anche andare con qualcosa del genere:

"Per offrirti la migliore esperienza di navigazione possibile, proviamo a rilevare il tipo di dispositivo per personalizzare il sito Web sul tuo dispositivo. Sfortunatamente a causa di limitazioni questo non è sempre possibile e al momento non è possibile determinare se si utilizza un iPad 2 o un iPad mini usando questi metodi.

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

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

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

"

Non ho completamente familiarità con ciò che puoi e non posso 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 sono diverse tra iPad2 e iPad mini?


Chiedere all'utente di lasciare il proprio iPad da diverse migliaia di metri dal suolo. Quindi utilizzare l'accelerometro interno per misurare il tempo impiegato dall'iPad per raggiungere la velocità finale. L'iPad più grande ha un coefficiente di resistenza maggiore e dovrebbe raggiungere la velocità finale in meno tempo rispetto a un iPad Mini .

Ecco alcuni esempi di codice per iniziare.

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

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


Potresti sempre chiedere all'utente ?!

Se l'utente non può vedere i pulsanti o il contenuto, quindi dare loro un modo per gestire il ridimensionamento stessi. È sempre possibile creare alcuni pulsanti di ridimensionamento sul sito per rendere il contenuto (testo / pulsanti) più grande / più piccolo. Questo sarebbe (quasi) garantito per funzionare per qualsiasi risoluzione corrente dell'iPad e probabilmente per qualsiasi futura risoluzione Apple deciderà di voler fare.


Questo è un tiro 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 quale tipo di informazioni è possibile ottenere da esso.

Ad esempio, questa pagina sembra suggerire che è possibile ottenere il valore rotationRate solo se il dispositivo ha un giroscopio.

Spiacente, 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ò inserire qui.


Questo mi ricorda una citazione dal film Equilibrium:

"Cosa diresti, è il modo più semplice per portare via un'arma da un Chierico di Grammaton?"

"Glielo chiedi."

Siamo così abituati a lottare per le soluzioni, quando a volte, potrebbe 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 quale iPad stanno usando quando lo avviano .

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

Qualche esempio:

  • Il rilevamento della tastiera durante l'installazione del sistema operativo a volte non è in grado di rilevare una tastiera specifica, pertanto l'installatore deve chiedere.
  • Windows chiede se una rete a cui ti colleghi è una rete domestica o una rete pubblica.
  • I computer non possono rilevare la persona che sta per usarlo, quindi richiedono un nome utente e una password.

Buona fortuna - spero che trovi una soluzione eccezionale! Se non lo fai, però, non dimenticarlo.


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

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


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

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

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 avere iPad per testarlo.


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 attraverso una regex window.navigator.userAgent utente ( window.navigator.userAgent ); quel numero è preceduto da " Mobile/ ".

Sfortunatamente questo è l'unico modo inequivocabile per rilevare un iPad Mini; Suggerirei di adottare un approccio relativo alla viewport (dove supportato, utilizzando unità vh / vw) per visualizzare correttamente i contenuti su diverse dimensioni dello schermo.


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

Sembra che Apple stia deliberatamente cercando di non farti capire la differenza. Apple sembra non volerci scrivere un codice diverso per le diverse versioni di dimensioni degli iPad. Non essendo parte della Apple stessa, non lo so per certo, sto solo dicendo che questo è quello che sembra. Forse, se la comunità di sviluppatori si presenta con un rilevatore di fantasia per iPad mini, Apple potrebbe deliberatamente interrompere quel rilevatore nelle versioni future di iOS. Apple vuole che tu imposti la dimensione minima del tuo obiettivo su 44 punti iOS, e iOS lo visualizzerà in due dimensioni, la più grande dimensione dell'iPad e la più piccola dimensione dell'iPhone / iPad. 44 punti sono molto generosi e i tuoi utenti sapranno sicuramente se si trovano nell'iPad più piccolo, quindi possono compensare autonomamente.

Suggerisco di tornare al motivo dichiarato per chiedere il rilevatore: la regolazione della dimensione dell'obiettivo per il comfort dell'utente finale. Decidendo di progettare per una taglia sul grande iPad e un'altra dimensione sul piccolo iPad, stai decidendo che tutte le persone hanno le stesse dita delle stesse dimensioni. Se il tuo design è talmente stretto che la differenza di dimensioni tra un iPad 2 e un mini iPad fa la differenza, le dimensioni delle dita tra me e mia moglie faranno la differenza. Quindi compensa la dimensione del dito dell'utente, non il modello dell'iPad.

Ho un suggerimento su come misurare le dimensioni delle dita. Sono uno sviluppatore iOS nativo, quindi non so se questo può essere realizzato in HTML5, ma ecco come misuro le dimensioni delle dita in un'app nativa. Vorrei che l'utente stringesse insieme due oggetti, quindi misurassi quanto vicini si incontrano. Le dita più piccole avvicinano gli oggetti e puoi utilizzare questa misura per ricavare un fattore di scala. Questo si adatta automaticamente alla dimensione dell'iPad. La stessa persona avrà una misurazione più grande dei punti sullo schermo su un iPad mini rispetto a un iPad 2. Per un gioco è possibile chiamare questo passaggio di calibrazione, o addirittura non chiamarlo. Fallo come punto di partenza. Ad esempio in un gioco di tiro il giocatore mette le munizioni nella pistola con un movimento di presa.


MODIFICA 1: la mia risposta originale, di seguito, era "non farlo". Nell'interesse di essere positivo:

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 / i dito / i dell'utente per guidare il dimensionamento dell'elemento dell'interfaccia utente e, forse, il posizionamento. Questo, ancora, è e dovrebbe probabilmente essere arrivato senza bisogno di sapere realmente su quale dispositivo si sta eseguendo. Esageriamo: la tua app è in esecuzione su uno schermo diagonale da 40 pollici. Non so la marca e il modello o il DPI. Come ridimensionate i controlli?

Devi mostrare un pulsante che è l'elemento di controllo nel sito / gioco. Lascerò a te decidere dove o come abbia senso farlo.

Mentre l'utente vedrà questo come un singolo pulsante, in realtà sarà composto da una matrice di piccoli pulsanti stretti che sono visivamente coperti per apparire come un'immagine a pulsante singolo. Immagina un pulsante 100 x 100 pixel composto da 400 pulsanti, ciascuno 5 x 5 pixel. Hai bisogno di sperimentare per vedere cosa ha senso qui e quanto piccolo deve essere il 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 la matrice risultante:

Quando l'utente tocca l'array di pulsanti, otterrà, in modo efficace, un'immagine dell'area di contatto del dito dell'utente. Puoi quindi utilizzare qualsiasi criterio tu voglia (probabilmente derivato empiricamente) per arrivare a una serie di numeri che puoi utilizzare per ridimensionare e posizionare i vari elementi dell'interfaccia utente in base alle tue esigenze.

La bellezza di questo approccio è che non ti importa più di quale nome o modello di dispositivo 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 inserimento nell'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 in cui giocheranno, ecc. Si ottiene l'idea. Il pulsante sense_array potrebbe vivere ovunque l'utente deve toccare per entrare nel gioco.

EDIT 2: osservando che probabilmente non hai bisogno di tanti pulsanti di rilevamento. Un insieme 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 pulsanti sono così piccoli da diventare inutilizzabili su un mini, è necessario ingrandire i pulsanti.

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

Mi chiedo, stai regolando la dimensione / posizione in verticale rispetto al paesaggio?


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

Il tuo obiettivo è migliorare l'esperienza 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.

Cosa succede se si rende l'area che risponde ai tocchi abbastanza grandi da essere facili da usare sull'iPad Mini mantenendo la rappresentazione visiva dei controlli dell'interfaccia utente abbastanza piccola da risultare visivamente piacevole sull'iPad?

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

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


In iOS7 è possibile modificare l'impostazione dell'intero sistema: quando le cose diventano troppo piccole per essere lette, è possibile modificare le impostazioni della dimensione del testo .

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

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

( sample pulsante CSS, grazie a jsfiddle e cssbuttongenerator)


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 loro 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 vale la pena in questo caso specifico, ma penso che il fingerprinting del rumore di fondo possa essere usato in alcune app, per esempio per dirti dove sei quando sei all'interno di un edificio.


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

Controllo di numberOfChannels restituiti 2su iPad mini ma nulla su iPad 2 con iOS 5 e 2con iOS 6.

Quindi ho provato a verificare se webkitAudioContext è disponibile

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

Lo stesso vale per iPad Mini e iPad 2 con iOS 6 che restituisce true mentre iPad 2 con iOS 5 restituisce false.

(Questo test non funziona su desktop, per desktop controllare se webkit AudioContext è una funzione).

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


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 una larghezza di 1 pollice e appendilo al corpo. Quindi creo un altro div con larghezza del 100% e lo applico al corpo:

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

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

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

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

Si noti inoltre che l'algoritmo proposto da Kaspars non solo non funzionerà se l'utente esegue l'applicazione come schermo intero, ma si interromperà anche se Apple patch l'interfaccia utente del browser.

Ciò non differenzia i dispositivi, ma come hai spiegato nella tua modifica ciò che vuoi veramente sapere è la dimensione dello schermo del dispositivo. La mia idea inoltre non ti dirà esattamente le dimensioni dello schermo, ma ti darà un'informazione ancora più utile, la dimensione reale (in pollici) che hai a disposizione per disegnare la tua GUI.

MODIFICA: utilizzare questo codice per verificare se funziona effettivamente sul dispositivo. Non possiedo iPad per testarlo.

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 la tua schermata in pollici. Sembra funzionare sul mio portatile, restituendo 15,49 mentre lo schermo del mio portatile è commercializzato a 15,4 ''. Qualcuno può testarlo su iPad e postare commenti per favore? Non dimenticare di eseguirlo a schermo intero.

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

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





svg