iPad Mini in HTML5 erkennen

Question

Das iPad Mini von Apple ist ein kleinerer Klon des iPad 2, und zwar in mehr Hinsicht, als uns lieb ist. In JavaScript, dem window.navigator Objekt zeigt die gleichen Werte für das Mini und das iPad 2 an. Meine bisherigen Versuche, den Unterschied zu erkennen, haben nicht zum Erfolg geführt.

Warum ist das wichtig?

Da die Bildschirme des iPad Mini und des iPad 2 in Bezug auf die Pixel identisch sind, sich aber in der tatsächlichen Größe (Zoll / Zentimeter) unterscheiden, unterscheiden sie sich in PPI (Pixel pro Zoll).

Damit Webanwendungen und Spiele eine benutzerfreundliche Oberfläche bieten, werden bestimmte Elemente in ihrer Größe an die Position des Daumens oder Fingers des Benutzers angepasst, so dass wir bestimmte Bilder oder Schaltflächen skalieren möchten, um eine bessere Benutzererfahrung zu ermöglichen.

Dinge, die ich bisher ausprobiert habe (einschließlich einiger ziemlich offensichtlicher Ansätze):

• window.devicepixelratio
• CSS-Elementbreite in der Einheit cm
• CSS-Medienabfragen (wie z. B. resolution y -webkit-device-pixel-ratio )
• SVG-Zeichnungen in ähnlichen Einheiten
• Durchführung aller möglichen CSS-Webkit-Transformationen für eine bestimmte Zeit und Zählen der gerenderten Frames mit requestAnimFrame (Ich hatte gehofft, einen messbaren Unterschied feststellen zu können)

Ich habe keine Ideen mehr. Wie steht es mit Ihnen?

アップデート Vielen Dank für die bisherigen Antworten. Ich möchte mich dazu äußern, dass die Leute gegen die Erkennung von iPad mini und 2 gestimmt haben, da Apple eine Richtlinie hat, die für alle gilt. Okay, hier ist meine Begründung, warum ich denke, dass es wirklich allen Sinn der Welt macht, zu wissen, ob eine Person ein iPad mini oder ein 2 benutzt. Und machen Sie mit meiner Begründung, was Sie wollen.

Das iPad mini ist nicht nur ein viel kleineres Gerät (9,7 Zoll gegenüber 7,9 Zoll), sondern sein Formfaktor ermöglicht auch eine andere Nutzung. Das iPad 2 wird beim Spielen normalerweise mit zwei Händen gehalten, es sei denn, man ist Chuck Norris . Der Mini ist zwar kleiner, aber er ist auch viel leichter und ermöglicht ein Gameplay, bei dem man ihn in einer Hand hält und mit der anderen Hand wischt oder tippt oder was auch immer. Als Spieldesigner und -entwickler möchte ich nur eines sagen wissen wenn es sich um eine Miniatur handelt, damit ich dem Spieler ein anderes Kontrollschema anbieten kann, wenn ich das möchte (z. B. nach A/B-Tests mit einer Gruppe von Spielern).

Warum? Es ist eine erwiesene Tatsache, dass die Mehrheit der Benutzer dazu neigt, die Standardeinstellungen zu verwenden. Wenn der Spieler das Spiel zum ersten Mal lädt, würde ich - und wahrscheinlich auch andere Spieldesigner - gerne auf den virtuellen Daumenstick verzichten und eine andere tippbasierte Steuerung auf den Bildschirm legen (ich gebe hier nur ein willkürliches Beispiel). können tun.

IMHO geht dies also über die Diskussionen über dicke Finger / Richtlinien hinaus und ist einfach etwas, das Apple und alle anderen Hersteller tun sollten: Erlauben Sie uns, Ihr Gerät eindeutig zu identifizieren und anders denken anstelle von unter Leitlinien.

Answer 1

Spielen Sie eine Stereo-Audiodatei ab und vergleichen Sie die Reaktion des Beschleunigungsmessers bei hoher Lautstärke auf dem rechten und dem linken Kanal - das iPad2 hatte Monolautsprecher, während das iPad Mini eingebaute Stereolautsprecher hat.

Wir brauchen Ihre Hilfe bei der Erfassung der Daten. diese Seite und mir helfen, Daten für diese verrückte Idee zu sammeln. Ich habe kein iPad mini, also brauche ich wirklich Ihre Hilfe

Answer 2

Aktualisierung: Es sieht so aus Diese Werte geben die Breite und Höhe des Ansichtsfensters zum Zeitpunkt der Erstellung der Registerkarte an und ändern sich nicht bei einer Drehung, so dass diese Methode kann nicht zur Geräteerkennung verwendet werden !

Sie können entweder die screen.availWidth o screen.availHeight da sie für iPad Mini und iPad 2 unterschiedlich zu sein scheinen.

iPad Mini

screen.availWidth = 768
screen.availHeight = 1004

iPad 2

screen.availWidth = 748
screen.availHeight = 1024

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

Answer 3

Mir ist klar, dass dies eine etwas unkonventionelle Lösung ist, aber da uns bisher nichts anderes eingefallen ist

Ich gehe davon aus, dass Sie die meisten anderen Geräte bereits überprüft haben, so dass ich folgende Szenarien für möglich halte.

Sie könnten nach ALLEN möglichen gängigen Geräten suchen, die spezielle CSS/Größenangaben erfordern, und wenn keines davon zutrifft, entweder annehmen, dass es sich um ein iPad mini handelt, oder einfach den Benutzer fragen?

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

Ich weiß, das mag im Moment wie ein dummer Ansatz erscheinen, aber wenn wir derzeit keine Möglichkeit haben, zu entscheiden, ob es sich bei dem Gerät um ein iPad mini oder ein iPad 2 handelt, wird die Website zumindest mit iPad mini-Geräten nutzbar sein, die so etwas tun.

Sie könnten auch etwas in dieser Art wählen:

"Um Ihnen das bestmögliche Surferlebnis zu bieten, versuchen wir, Ihren Gerätetyp zu erkennen, um die Website an Ihr Gerät anzupassen. Leider ist dies aufgrund von Einschränkungen nicht immer möglich und wir können mit diesen Methoden derzeit nicht feststellen, ob Sie ein iPad 2 oder ein iPad mini verwenden.

Für ein optimales Surferlebnis wählen Sie bitte unten das Gerät aus, das Sie verwenden.

Diese Auswahl wird für künftige Besuche der Website auf diesem Gerät gespeichert.

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

"

Ich bin nicht ganz vertraut mit dem, was man auf der Client-Seite in Javascript tun kann und was nicht. Ich weiß, dass Sie die IP-Adresse eines Benutzers erhalten können, aber ist es möglich, die Mac-Adresse eines Benutzers zu erhalten? Sind diese Bereiche zwischen iPad2 und iPad mini unterschiedlich?

Answer 4

Ich weiß, dass das eine schreckliche Lösung ist, aber im Moment ist die einzige Möglichkeit, zwischen einem iPad Mini und einem iPad 2 zu unterscheiden, die Überprüfung der Build-Nummer und die Zuordnung jeder Build-Nummer zu dem entsprechenden Gerät.

Hier ein Beispiel: Das iPad mini, Version 6.0, zeigt " 10A406 " als Build-Nummer, während das iPad 2 die " 10A5376e ".

Dieser Wert kann leicht durch eine Regex im User-Agent ermittelt werden ( window.navigator.userAgent ); dieser Nummer ist ein "" vorangestellt. Mobile/ ".

Leider ist dies die einzige eindeutige Möglichkeit, ein iPad Mini zu erkennen; ich würde vorschlagen, eine viewport verwandten Ansatz (wo unterstützt, unter Verwendung von vh / vw-Einheiten), um Inhalte auf verschiedenen Bildschirmgrößen korrekt anzuzeigen.

Answer 5

Tl;dr Kompensieren Sie nicht den Unterschied zwischen iPad mini und iPad 2, es sei denn, Sie kompensieren auch zwischen dicken und dünnen Fingern.

Apple scheint absichtlich zu versuchen, den Unterschied nicht erkennen zu lassen. Apple scheint nicht zu wollen, dass wir unterschiedlichen Code für die verschiedenen Größen des iPads schreiben. Da ich selbst nicht zu Apple gehöre, weiß ich das nicht mit Sicherheit, ich sage nur, dass es so aussieht. Wenn die Entwicklergemeinde einen ausgefallenen Detektor für iPad Minis entwickelt, könnte Apple diesen Detektor in zukünftigen Versionen von iOS absichtlich ausschalten. Apple möchte, dass Sie Ihre minimale Zielgröße auf 44 iOS-Punkte einstellen, und iOS zeigt dies in zwei Größen an, der größeren iPad-Größe und der kleineren iPhone-/iPad-mini-Größe. 44 Punkte sind großzügig bemessen, und Ihre Nutzer werden sicherlich wissen, ob sie das kleinere iPad verwenden, und können dies selbst kompensieren.

Ich schlage vor, dass Sie sich auf den von Ihnen genannten Grund für die Anfrage nach dem Detektor besinnen: Anpassung der Zielgröße an den Komfort des Endverbrauchers. Mit der Entscheidung, eine Größe für das große iPad und eine andere Größe für das kleine iPad zu entwickeln, gehen Sie davon aus, dass alle Menschen gleich große Finger haben. Wenn Ihr Design so eng gefasst ist, dass der Größenunterschied zwischen einem iPad 2 und einem iPad mini einen Unterschied ausmacht, dann macht die Größe der Finger von mir und meiner Frau einen größeren Unterschied. Kompensieren Sie also die Fingergröße des Nutzers, nicht das iPad-Modell.

Ich habe einen Vorschlag, wie man die Fingergröße messen kann. Ich bin ein nativer iOS-Entwickler, also weiß ich nicht, ob dies in HTML5 erreicht werden kann, aber hier ist, wie ich die Fingergröße in einer nativen App messen würde. Ich würde den Benutzer zwei Objekte zusammendrücken lassen und dann messen, wie nah sie zusammenkommen. Kleinere Finger bringen die Objekte näher zusammen, und Sie können diese Messung verwenden, um einen Skalierungsfaktor abzuleiten. Dieser passt sich automatisch an die iPad-Größe an. Dieselbe Person wird auf einem iPad mini eine größere Anzahl von Punkten auf dem Bildschirm haben als auf einem iPad 2. Bei einem Spiel können Sie dies als Kalibrierungsschritt bezeichnen oder es nicht einmal erwähnen. Es sollte ein Anfangsschritt sein. In einem Schießspiel kann der Spieler zum Beispiel die Munition mit einer Zwickbewegung in die Waffe stecken.