Erkennen Sie das iPad Mini in HTML5

376

Apples iPad Mini ist in mehr als einer Hinsicht ein kleinerer Klon des iPad 2. In JavaScript stellt das window.navigatorObjekt dieselben Werte für Mini und iPad 2 bereit. Meine bisherigen Tests zur Erkennung des Unterschieds haben nicht zum Erfolg geführt.

Warum ist das wichtig?

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

Damit Webanwendungen und Spiele eine benutzerfreundliche Oberfläche bieten, werden bestimmte Elemente in der Größe relativ zur Daumen- oder Fingerposition eines Benutzers angepasst. Daher möchten wir möglicherweise bestimmte Bilder oder Schaltflächen skalieren, um eine bessere Benutzererfahrung zu erzielen.

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

  • window.devicepixelratio
  • CSS-Elementbreite in cm-Einheit
  • CSS-Medienabfragen (wie resolutionund -webkit-device-pixel-ratio)
  • SVG-Zeichnungen in ähnlichen Einheiten
  • Durchführen aller Arten von CSS-Webkit-Transformationen für eine festgelegte Zeit und Zählen gerenderter Frames mit requestAnimFrame(ich hatte gehofft, einen messbaren Unterschied festzustellen)

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

Update Danke für die bisherigen Antworten. Ich möchte Kommentare zu Leuten abgeben, die gegen die Erkennung von iPad mini gegen 2 stimmen, da Apple ähm hat, eine Richtlinie, um sie alle zu regieren. Okay, hier ist meine Argumentation, warum ich der Meinung bin, dass es auf der Welt wirklich Sinn macht zu wissen, ob eine Person ein iPad mini oder eine 2 verwendet. Und machen Sie mit meiner Argumentation, was Ihnen gefällt.

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 Verwendung. Das iPad 2 wird beim Spielen normalerweise mit zwei Händen gehalten, es sei denn, Sie sind Chuck Norris . Der Mini ist kleiner, aber auch viel leichter und ermöglicht das Gameplay, wenn Sie ihn in einer Hand halten und mit einer anderen Hand wischen oder tippen oder so weiter. Als Spieledesigner und -entwickler möchte ich nur wissen, ob es sich um einen Mini handelt, damit ich dem Spieler ein anderes Kontrollschema zur Verfügung stellen kann, wenn ich möchte (zum Beispiel nach A / B-Tests mit einer Gruppe von Spielern).

Warum? Nun, es ist eine erwiesene Tatsache, dass die Mehrheit der Benutzer dazu neigt, die Standardeinstellungen zu verwenden. Lassen Sie also einen virtuellen Daumenstift weg und setzen Sie ein anderes tippenbasiertes Steuerelement auf den Bildschirm (hier nur ein beliebiges Beispiel), wenn der Player das lädt Spiel zum ersten Mal ist das, was ich und wahrscheinlich auch anderer Game - Designer, würde gerne die Lage sein zu tun.

Also meiner Meinung nach geht dies über die dicken Finger / Richtlinien Diskussionen und ist nur etwas , Apple und alle anderen Anbieter tun sollten: uns erlauben , eindeutig auf Ihr Gerät zu identifizieren und verschiedene denken statt folgenden Richtlinien.

Martin Kool
quelle
gute frage .. auch ich suchte nach einer lösung. Fand nichts im Web
AnhSirk Dasarp
4
Am besten melden Sie einen Fehler bei apple bugreporter.apple.com. Wenn genügend Leute dies tun, besteht die Hoffnung, dass sie uns hören. Die aktuelle Situation ist eher entmutigend.
William Jockusch
Können Sie -wekkit-min-device-pixel-ratio nicht verwenden :? Wie für iPhone 4 mobilexweb.com/blog/…
Bgi
1
Hmmm, wie wäre es, dem HIG zu folgen, anstatt dies zu versuchen? Dies ist eine Verschwendung von Zeit und Mühe und hat mich aufrichtig krank gemacht, dies zu lesen. Warum können die Leute nicht richtig machen?
Elland

Antworten:

253

Spielen Sie eine Stereo-Audiodatei ab und vergleichen Sie die Reaktion des Beschleunigungsmessers, wenn die Lautstärke auf dem rechten und dem linken Kanal hoch ist. Das iPad2 verfügt über Mono-Lautsprecher, während das iPad Mini über integrierte Stereo-Lautsprecher verfügt.

Benötigen Sie Ihre Hilfe, um die Daten zu sammeln? Besuchen Sie diese Seite und helfen Sie mir, Daten für diese verrückte Idee zu sammeln. Ich habe kein iPad mini, also brauche ich wirklich deine Hilfe

Avi Marcus
quelle
35
Sie glauben nicht, dass das Gerät, das beim Besuch der Website Geräusche ausstößt, eine schlechte Idee ist? Ganz zu schweigen davon, dass Menschen ihr Gerät möglicherweise stumm schalten. Kein Ton würde dies aufhalten.
Flexd
6
Als geringfügige Änderung: Spielen Sie eine Stereo-Audiodatei ab, bei der der rechte Kanal eine invertierte Version des linken Kanals ist. Mit einem einzelnen Lautsprecher sollten sie aufheben und den Beschleunigungsmesser nicht beeinflussen. In beiden Fällen ist es jedoch sehr unzuverlässig, sich auf Lautsprecher und Beschleunigungsmesser zu verlassen.
Kevin Ennis
4
Jemand muss diese Lösung wirklich implementieren und die Ergebnisse zeigen.
Stephen Eilert
14
Was kehrt in diesem Sinne auf dem iPad2 new webkitAudioContext().destination.numberOfChannelszurück?
Douglas
3
@flexd Sie glauben nicht, dass Geräteerkennung eine schlechte Idee ist?
Ricardo Tomasi
132

Update: Es sieht aus wie diese Werte den Hinweis auf die Ansichtsfenster Breite und Höhe zum Zeitpunkt der Registerkarte Schöpfung, und sie ändern sich nicht bei der Drehung, so diese Methode nicht für Geräteerkennung verwendet werden kann !

Sie können entweder screen.availWidthoder verwenden, screen.availHeightda 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/

Kaspars
quelle
3
Bisher sieht es nach der besten kompromisslosen Lösung aus.
Morgan Wilde
Ich wundere mich über diesen Unterschied. Ich dachte, beide verwenden die gleiche Auflösung? Unterscheidet sich das Safari-Chrom bei diesen beiden Geräten?
Marc
10
Dies ist ein Detektor dafür, wie viele Registerkarten geöffnet sind. Auf meinem iPad 3 werden unterschiedliche Werte angezeigt, wenn mehr als ein Tipp geöffnet ist, der mit den Berichten auf den Bildschirmaufnahmen übereinstimmt. Bei der iPad Mini-Bildschirmaufnahme sind zwei Registerkarten geöffnet, bei der iPad 2-Aufnahme nur eine. Mein iPad 3 meldet übereinstimmende Werte, wenn ein oder zwei Registerkarten geöffnet sind.
Herr Berna
7
Nein, dies ist kein Detektor für die Anzahl der geöffneten Registerkarten. Dies ist ein Detektor für die Ausrichtung, in der das Gerät geöffnet war, als die Registerkarte zum Laden dieser Seite zum ersten Mal "verwendet" wurde. Ich bin mir nicht sicher, ob dies daran liegt, dass die Größe des Ansichtsfensters nach dem Drehen des Tabs tatsächlich jetzt tatsächlich auf diesem Wert festgelegt ist oder ob es einfach irgendwo falsch zwischengespeichert wird, aber ob Sie herum sitzen und mit mehreren Tabs in verschiedenen Rotationen spielen Konfigurationen können Sie sehen, wie es korreliert. Interessant wird, dass wenn Sie die Registerkarten wechseln, drehen und dann zur vorherigen Registerkarte zurückkehren und neu laden, diese aktualisiert wird.
Jay Freeman -saurik-
1
Ja, Jay, ich habe einen ähnlichen Fehler gemacht und ein Ergebnis falsch der falschen Ursache zugeordnet. Mein impliziter Punkt ist jedoch, dass dies kein Detektor für iPad-Minis ist, da er auf anderen iPads falsch positive Ergebnisse liefert.
Herr Berna
84

Ich verstehe, dass dies vielleicht eine Low-Tech-Lösung ist, aber da wir uns noch nichts anderes einfallen lassen können.

Ich gehe davon aus, dass Sie bereits nach den meisten anderen Geräten suchen, daher sehe ich die folgenden möglichen Szenarien.

Sie könnten nach ALLEN möglichen beliebtesten Geräten suchen, für die eine spezielle CSS- / Größenanpassung erforderlich ist. Wenn diese übereinstimmen, können Sie entweder davon ausgehen, 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ß, dass dies im Moment vielleicht dumm erscheint, 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, kann die Website zumindest mit iPad mini-Geräten verwendet werden, die so etwas tun.

Sie könnten sogar mit so etwas gehen:

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

Wählen Sie unten das Gerät aus, das Sie verwenden, um das bestmögliche Surferlebnis zu erzielen.

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

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

""

Ich bin nicht ganz vertraut damit, was Sie in Javascript clientseitig tun können und was nicht. Ich weiß, dass Sie die IP eines Benutzers abrufen können, aber ist es möglich, die Mac-Adresse eines Benutzers abzurufen? Unterscheiden sich diese Bereiche zwischen iPad2 und iPad Mini?

flexd
quelle
25
Ich stimme dieser Lösung sehr zu. Es ist besser, dem Benutzer zu erlauben, sein Gerät auszuwählen (und möglicherweise zu ändern), als ihn an das zu binden, was Sie denken , dass er will. Wenn Sie das Gerät ziemlich genau bestimmen können; Verwenden Sie dies als Standard, aber ich denke, Sie sollten immer eine Auswahl anbieten - auch wenn es in einem Einstellungsmenü versteckt ist.
Liam Newmarch
2
@LiamNewmarch Ich bin auch ein großer Fan von Vermutungen und schnellen Benutzern, anstatt Benutzerpräferenzen anzunehmen und sie zu sperren. Manchmal möchte ich die Desktop-Site auf meinem iPad verwenden. Normalerweise möchte ich die englische Version einer Site verwenden, unabhängig davon, wo in der verdammten IP-to-Geo-Datenbank angegeben ist, dass ich mich derzeit geografisch befinde! Sie haben meine Gegenstimme, Sir.
Rebecca
7
Ich würde jedoch davon abraten, eine Popup-Frage zu verwenden. Machen Sie ein Banner wie SO, wenn es Sie automatisch anmeldet. Der Benutzer kann die Seite also einfach lesen, wenn er nicht antworten möchte, anstatt gezwungen zu sein, eine Frage zu beantworten.
Michael Allen
1
Indem Sie den Benutzern die Frage stellen, verschlechtern Sie die Benutzererfahrung so stark, dass Apple die Änderung vornehmen kann, da dies sehr wichtig ist.
JiminyCricket
9
-1: Ich hasse Seiten, die mir Fragen stellen, wenn ich sie besuche. Meine Antwort: "Wen interessiert das, zeig mir einfach den Inhalt!". Der Unterschied zwischen iPad2 und iPad mini ist nicht groß genug (IMnsHO), um diesen Ansatz zu rechtfertigen. JS ja, Fragen nein.
Johndodo
74

Ich weiß, dass dies eine schreckliche Lösung ist, aber im Moment besteht die einzige Möglichkeit, zwischen einem iPad Mini und einem iPad 2 zu unterscheiden, darin, die Build-Nummer zu überprüfen und jede Build-Nummer dem zugehörigen Gerät zuzuordnen.

Lassen Sie mich ein Beispiel geben: iPad mini, Version 6.0, macht " 10A406" als Build-Nummer verfügbar , während iPad 2 " 10A5376e" verfügbar macht .

Dieser Wert kann leicht durch einen regulären Ausdruck auf dem Benutzeragenten ( window.navigator.userAgent) abgerufen werden . dieser Nummer wird " Mobile/" vorangestellt .

Leider ist dies die einzige eindeutige Möglichkeit, ein iPad Mini zu erkennen. Ich würde vorschlagen, einen viewportverwandten Ansatz zu wählen (sofern unterstützt, mit VH / VW-Einheiten), um Inhalte auf verschiedenen Bildschirmgrößen richtig anzuzeigen.

Alessandro Piatti
quelle
5
Die Build-Nummer scheint der Schlüssel zu sein, aber ich habe festgestellt, dass die Build-Nummer je nach Land, in dem das Gerät gekauft wurde, unterschiedlich sein kann. In Griechenland scheint die iPad 2-Build-Nummer beispielsweise 10A403 anstelle von 10A5376e zu sein, was ich auch gesehen habe von US iPad 2. Ich vermute, dass die Build-Nummer für die Minis ebenfalls unterschiedlich sein kann.
Esjr
67
Diese Lösung ist falsch. Für einige Zusammenhänge: Die "Build-Nummer" beschreibt das Betriebssystem und nicht die Hardware. Wenn verschiedene Geräte immer unterschiedliche Betriebssystem-Builds hätten, wäre das in Ordnung, aber das war in der Vergangenheit nur für die erste Betriebssystem-Version der Fall, die mit jedem neuen Gerät geliefert wurde. In diesem Fall ist 10A406 die Build-Nummer für 6.0 für das iPad Mini und 10A403 die Build-Nummer für 6.0 für das iPad 2 ( nicht 10A5376e, 6.0 Beta 4). Die Build-Nummer 6.0.1 für beide ist jedoch bereits 10A523, sodass der aktuelle Build bereits identisch ist und zukünftige Builds weiterhin verwendet werden.
Jay Freeman -saurik-
1
Ich fürchte, Jay ist korrekt und hat meine Daten überprüft (so wie sie sind): Die Build-Nummer spiegelt das Betriebssystem wider.
Esjr
1
Haben Sie diesen PPI-Hack ausprobiert? stackoverflow.com/questions/279749/… - Erstellen Sie im Grunde ein verstecktes Element mit einer Breite von 1 Zoll und ermitteln Sie dann die Breite in Pixel. Das sollte Ihr Grundproblem lösen.
JohnLBevan
@ JohnLBevan: Das kann das Rendering-Problem lösen, aber was ist mit Protokollanalysen usw.? Das Hauptproblem liegt bei unseren Freunden in Cupertino und dem Vorstoß zu "nativen" Apps.
Esjr
69

tl; dr Kompensieren Sie den Unterschied zwischen iPad mini und iPad 2 nur, wenn Sie auch zwischen fetten und dünnen Fingern kompensieren.

Apple scheint absichtlich zu versuchen, Sie den Unterschied nicht erkennen zu lassen. Apple scheint nicht zu wollen, dass wir unterschiedlichen Code für die verschiedenen Größen von iPads schreiben. Da ich selbst nicht Teil von Apple bin, weiß ich das nicht genau. Ich sage nur, dass es so aussieht. Wenn die Entwicklergemeinde einen ausgefallenen Detektor für iPad-Minis entwickelt, kann Apple diesen Detektor in zukünftigen Versionen von iOS möglicherweise absichtlich beschädigen. Apple möchte, dass Sie Ihre Mindestzielgröße auf 44 iOS-Punkte festlegen. IOS zeigt diese in zwei Größen an, der größeren iPad-Größe und der kleineren iPhone / iPad-Mini-Größe. 44 Punkte sind reichlich großzügig, und Ihre Benutzer werden sicherlich wissen, ob sie sich auf dem kleineren iPad befinden, sodass sie dies selbst kompensieren können.

Ich schlage vor, zu Ihrem angegebenen Grund für die Frage nach dem Detektor zurückzukehren: Anpassen der Zielgröße für den Komfort des Endbenutzers. Wenn Sie sich entscheiden, für eine Größe auf dem großen iPad und eine andere Größe auf dem kleinen iPad zu entwerfen, entscheiden Sie, dass alle Menschen Finger gleicher Größe haben. Wenn Ihr Design so eng ist, dass der Größenunterschied zwischen einem iPad 2 und einem iPad mini einen Unterschied macht, macht die Größe der Finger zwischen mir und meiner Frau einen größeren Unterschied. Kompensieren Sie also die Fingergröße des Benutzers, nicht das iPad-Modell.

Ich habe einen Vorschlag, wie man die Fingergröße misst. Ich bin ein nativer iOS-Entwickler, daher weiß ich nicht, ob dies in HTML5 möglich ist, aber hier ist, wie ich die Fingergröße in einer nativen App messen würde. Ich würde den Benutzer zwei Objekte zusammenklemmen lassen und dann messen, wie nahe sie zusammenkommen. Kleinere Finger bringen die Objekte näher zusammen, und Sie können diese Messung verwenden, um einen Skalierungsfaktor abzuleiten. Dies passt sich automatisch der iPad-Größe an. Dieselbe Person hat auf einem iPad mini eine größere Messung der Bildschirmpunkte als auf einem iPad 2. Für ein Spiel können Sie dies als Kalibrierungsschritt bezeichnen oder nicht einmal ausrufen. Haben Sie es als Startschritt. Lassen Sie den Spieler beispielsweise in einem Schießspiel die Munition mit einer Kneifbewegung in die Waffe stecken.

Herr Berna
quelle
1
Dieser erste Absatz ist die richtige Antwort. Die empfohlene Zielgröße von 44 Punkten ist vollkommen in Ordnung.
Ricardo Tomasi
Mann, wenn ich nur noch tausend Stimmen hätte. Erster Absatz ist in der Tat, Sie haben das Internet gewonnen.
Mike
31

Bitten Sie den Benutzer, sein iPad aus mehreren tausend Fuß Höhe über den Boden fallen zu lassen. Verwenden Sie dann den internen Beschleunigungsmesser, um die Zeit zu messen, die das iPad benötigt, um die Endgeschwindigkeit zu erreichen. Das größere iPad hat einen größeren Luftwiderstandsbeiwert und sollte die Endgeschwindigkeit in kürzerer Zeit erreichen als ein iPad Mini .

Hier finden Sie einen Beispielcode für den Einstieg.

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

Sie müssen diesen Code mit ziemlicher Sicherheit erneut aufrufen, wenn Apple das nächste iPad zwangsläufig in einem anderen Formfaktor veröffentlicht. Aber ich bin sicher, Sie werden den Überblick behalten und diesen Hack für jede neue Version des iPad beibehalten.

Jason
quelle
Sollte das nicht "mehr Zeit als ein iPad mini" sein?
ThomasW
1
Nizza Galileo-ish Gedankengang angewendet auf ein modernes Problem .... Ich frage mich, was als nächstes kommt ..
Matanster
2
Um dies zuverlässiger zu machen, sollten iPad-Hüllen vor dem Ablegen entfernt werden.
Fuhrmanator
28

Leider scheint dies im Moment nicht möglich zu sein: http://www.mobilexweb.com/blog/ipad-mini-detection-for-html5-user-agent

Vor zwei Tagen habe ich über das erste erkannte Problem getwittert: „ Es wurde bestätigt, dass der iPad Mini User Agent mit dem iPad 2 identisch ist .“ Ich habe buchstäblich Hunderte von Antworten erhalten, die besagen, dass das Schnüffeln von Benutzeragenten eine schlechte Praxis ist, dass wir Funktionen erkennen sollten, nicht Geräte usw. usw.

Nun ja Leute, Sie haben Recht, aber es hat keine direkte Beziehung zu dem Problem. Und ich muss noch die zweite schlechte Nachricht hinzufügen: Es gibt auch keine clientseitige Technik, um die Feature-Erkennung durchzuführen .

BenM
quelle
8
@ net.uk.sweet - Warum bearbeitest du dann nicht die Antwort und behebst die Fehler? Übrigens scheint das Englisch im zitierten Text nicht so schlecht zu sein.
Sandman
@shi wie kannst du wissen, dass der Autor dieses zitierten Textes ein Italiener ist? Ich bin auch kein englischer Muttersprachler. LOL
Toby D
"Es gibt keine clientseitige Technik, um die 'Feature-Erkennung' durchzuführen", ist völlig falsch. Feature-Erkennung ! = Geräteerkennung
Ricardo Tomasi
@Mytic Moon Ich habe mir gerade den Originalartikel angesehen, der im obigen Beitrag verlinkt ist und Informationen über den Autor enthält.
Shi
26

Dies ist ein wilder Schuss, aber einer der Unterschiede zwischen iPad 2 und iPad mini besteht darin, dass erstere kein 3-Achsen-Gyroskop haben. Möglicherweise können Sie mithilfe der WebKit-API zur Geräteorientierung ermitteln, welche Informationen Sie daraus erhalten können.

Zum Beispiel dieser Seite scheint darauf hinzudeuten , dass Sie nur das bekommen rotationRateWert , wenn das Gerät ein Gyroskop hat.

Leider kann ich keinen funktionierenden POC angeben. Ich habe keinen Zugriff auf ein iPad mini. Vielleicht kann sich hier jemand einschalten, der etwas mehr über diese Orientierungs-APIs weiß.

Assaf Lavie
quelle
3
Auf der Apple-Website wird das Gyroskop auf dem iPad 2 daher nicht als "3-Achsen" -Gyroskop beschrieben. Wenn sie jedoch "Gyroskop" sagen, meinen sie eine bestimmte Art von Teil (so dass Anwendungsentwickler, die Spiele entwickeln, die diesen Teil aufgrund der Gyroskopfunktion benötigen, sicher sein können, dass er vorhanden ist und für sie funktioniert). Wenn Sie eine Google-Suche nach "3-Achsen-Gyroskop" "iPad 2" durchführen, finden Sie zahlreiche Artikel aus den Jahren Ende 2010 und Anfang 2011, in denen erläutert wird, wie das iPad 2 voraussichtlich mit demselben 3-Achsen-Gyroskopteil wie das iPad 2 herauskommt iPhone 4 hatte bereits: Als es herauskam, wurden wir nicht enttäuscht; P.
Jay Freeman -saurik-
Dies ist, worauf ich meinen Vorschlag gestützt habe: apple.com/ipad/ipad-2/specs.html Es wird kein Gyroskop erwähnt. Nur "Beschleunigungsmesser". Angesichts dessen und der Tatsache, dass ihre Dokumente darauf hindeuten, dass einige Geräte nur eine Teilmenge der Bewegungs-API unterstützen, ist dies einen Versuch wert. Ich würde, wenn ich ein iPad mini hätte ...
Assaf Lavie
2
Nein, im Ernst: Genau dort steht "Gyroskop" im selben kleinen Abschnitt wie "Beschleunigungsmesser". Ich denke, ich kann einen Screenshot der Webseite posten, die Sie gerade mit dem hervorgehobenen Wort "Gyroskop" verknüpft haben, aber Sie sollten ihn mit Strg-F finden können. (Bearbeiten: OK, für den Humor-Wert habe ich das getan: i.imgur.com/8BZhx.png <- jetzt sehen ?; P) Unabhängig davon, um den Unterschied "3-Achsen-Gyroskop" noch mehr zur Ruhe zu bringen, wenn Sie Besuchen Sie die untergeordneten Seiten, die Apple für diese Art von Dingen als Referenz für den historischen Support aufbewahrt. Sie können sehen, dass dort sogar "3-Achsen-Kreisel" steht. support.apple.com/kb/SP622
Jay Freeman -saurik-
1
Nun, es besteht wirklich kein Grund zu spekulieren, ob es wirklich einen Unterschied zwischen den Bewegungs-API-Funktionen des iPad mini und des iPad 2 gibt. Es geht nur darum, es auszuprobieren und zu sehen. Also, wer hat hier ein iPad mini? Unabhängig davon bin ich auf diese Idee gekommen, indem ich mir die technischen Daten für beide Geräte angesehen und nach Unterschieden gesucht habe, die in HTML / JS erkannt werden können. Es könnte auch andere Unterschiede geben.
Assaf Lavie
20

Nun, das iPad 2 und das iPad Mini haben unterschiedlich große Batterien.

Wenn iOS 6 dies unterstützt, können Sie den aktuellen Akkuladestand 0.0..1.0verwenden window.navigator.webkitBattery.level. Auf einer bestimmten Ebene, entweder in Hardware oder Software, wird dies wahrscheinlich als berechnet CurrentLevel / TotalLevel, wobei beide Ints sind. Wenn ja, führt dies zu einem Float, der ein Vielfaches von ist 1 / TotalLevel. Wenn Sie viele Batteriestandswerte von beiden Geräten ablesen und berechnen, können battery.level * nSie möglicherweise einen Wert von n finden, bei dem alle Ergebnisse nahe an ganzen Zahlen liegen, was Ihnen iPad2TotalLevelund ergibt iPadMiniTotalLevel.

Wenn diese beiden Zahlen unterschiedlich sind und sich gegenseitig primieren, können Sie in der Produktion battery.level * iPad2TotalLevelund berechnen battery.level * iPadMiniTotalLevel. Was näher an einer Ganzzahl liegt, zeigt an, welches Gerät verwendet wird.

Entschuldigung für die Anzahl der Wenns in dieser Antwort! Hoffentlich kommt etwas Besseres.

Douglas
quelle
18

EDIT 1: Meine ursprüngliche Antwort unten war "Tu es nicht". Im Interesse des Positiven:

Die eigentliche Frage hat meiner Meinung nach nichts mit dem iPad X vs. iPad mini zu tun. Ich denke, es geht darum, die Abmessungen der UI-Elemente und die Platzierung an die Ergonomie des Benutzers anzupassen. Sie müssen die Größe der Finger des Benutzers bestimmen, um die Größe und möglicherweise die Positionierung Ihres UI-Elements zu steuern. Dies ist und sollte wahrscheinlich erreicht werden, ohne dass Sie wissen müssen, auf welchem ​​Gerät Sie arbeiten. Übertreiben wir: Ihre App läuft auf einem Bildschirm mit einer Diagonale von 40 Zoll. Sie kennen weder Marke und Modell noch DPI. Wie dimensionieren Sie die Steuerelemente?

Sie müssen eine Schaltfläche anzeigen, die das Gating-Element in der Site / im Spiel darstellt. Ich überlasse es Ihnen zu entscheiden, wo oder wie dies sinnvoll ist.

Während der Benutzer dies als eine einzelne Schaltfläche sieht, besteht sie in Wirklichkeit aus einer Matrix kleiner, dicht gepackter Schaltflächen, die visuell abgedeckt ist, um als Einzelschaltflächenbild zu erscheinen. Stellen Sie sich eine 100 x 100 Pixel große Schaltfläche vor, die aus 400 Schaltflächen mit jeweils 5 x 5 Pixel besteht. Sie müssen experimentieren, um zu sehen, was hier Sinn macht und wie klein Ihre Stichprobe sein muss.

Mögliches CSS für Button Array:

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

Und das resultierende Array:

Schaltflächenarray

Wenn der Benutzer das Tastenfeld berührt, erhalten Sie effektiv ein Bild des Kontaktbereichs des Fingers des Benutzers. Sie können dann beliebige Kriterien verwenden (wahrscheinlich empirisch abgeleitet), um zu einer Reihe von Zahlen zu gelangen, mit denen Sie die verschiedenen UI-Elemente gemäß Ihren Anforderungen skalieren und positionieren können.

Das Schöne an diesem Ansatz ist, dass Sie sich nicht mehr darum kümmern, mit welchem ​​Gerätenamen oder Modell Sie es möglicherweise zu tun haben. Alles, was Sie interessiert, ist die Größe des Fingers des Benutzers in Bezug auf das Gerät.

Ich würde mir vorstellen, dass diese Schaltfläche sense_array als Teil des Eingabeprozesses in die Anwendung ausgeblendet werden könnte. Wenn es sich beispielsweise um ein Spiel handelt, gibt es möglicherweise eine Schaltfläche "Spielen" oder verschiedene Schaltflächen mit den Namen des Benutzers oder ein Mittel, um auszuwählen, welches Level er spielen soll usw. Sie haben die Idee. Die sense_array-Schaltfläche kann überall dort angezeigt werden, wo der Benutzer sie berühren muss, um ins Spiel zu gelangen.

EDIT 2: Nur zu beachten, dass Sie wahrscheinlich nicht so viele Sense-Buttons benötigen. Ein Satz konzentrischer Kreise oder Schaltflächen, die wie ein riesiges Sternchen angeordnet sind, reicht *möglicherweise aus. Du musst experimentieren.

Mit meiner alten Antwort unten gebe ich Ihnen beide Seiten der Medaille.

ALTE ANTWORT:

Die richtige Antwort lautet: Tu das nicht. Es ist eine schlechte Idee.

Wenn Ihre Tasten so klein sind, dass sie auf einem Mini unbrauchbar werden, müssen Sie Ihre Tasten größer machen.

Wenn ich bei nativen iOS-Apps überhaupt etwas gelernt habe, ist der Versuch, Apple auszutricksen, eine Formel für unangemessenen Schmerz und Ärger. Wenn sie sich dafür entschieden haben, dass Sie das Gerät nicht identifizieren können, liegt das daran, dass Sie es in ihrer Sandbox nicht tun sollten.

Ich frage mich, passen Sie die Größe / Position im Hoch- oder Querformat an?

Martins
quelle
Warten Sie, haben Sie die Frage gelesen? "Bestimmte Elemente werden in der Größe relativ zur Daumen- oder Fingerposition eines Benutzers angepasst"
Christian
Meine Frage war, ob das OP Elemente basierend auf der Ausrichtung im Hoch- / Querformat anpasst oder nicht. Webbrowser passen sich automatisch an die zusätzliche Breite der Querformat an und rendern alle Inhalte größer als Hochformat. Ich möchte nur darauf hinweisen, dass es - es sei denn, Sie sperren alles - fast keine Möglichkeit gibt, für jedes mögliche Gerät, jede Ausrichtung und jeden Benutzer zu optimieren, es sei denn, Sie schreiben eine native iOS-App. Selbst dann möchten Sie vielleicht vorsichtig mit den Entscheidungen sein, die Sie treffen. Könnte dies über eine Web-App und Javascript erfolgen? Wahrscheinlich. Ich denke einfach nicht, dass es eine gute Idee ist.
Martins
Ah ich sehe. Interessante Bearbeitung auch, würde gerne so etwas in der Praxis sehen.
Christian
1
Würde so ein "Sense Array" überhaupt funktionieren? Ich würde davon ausgehen, dass iOS die Zelle auswählt, die der Stelle am nächsten liegt, an der der Benutzer sie berührt hat, und nur darauf "klickt", nicht jede einzelne Zelle unter dem Finger des Benutzers. Wenn es tut Arbeit, das wäre verdammt cool, though.
HellaMad
Kein Grund dafür, nicht zu funktionieren. Es handelt sich um eine Reihe von Objekten, die auf Berührungsereignisse reagieren und Nachrichten senden.
Martins
11

Was ist mit einem Mikro-Benchmark? Berechnen Sie etwas, das auf dem iPad 2 ungefähr X Mikrosekunden und auf dem iPad mini Y Sekunden benötigt.

Es ist wahrscheinlich nicht genau genug, aber es könnte einige Anweisungen geben, mit denen der Chip des iPad mini effizienter ist.

Les
quelle
11

Ja, es ist ein guter Punkt, um das Gyroskop zu überprüfen. Sie können es leicht mit tun

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

oder so ähnlich

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

Sie haben keine iPads zum Testen.

lc0
quelle
12
Diese Lösung funktioniert nicht (getestet auf einem iPad Mini und einem iPad 2: beide werden als "iPad2" erkannt) 2) Laut Apples Website haben sowohl das iPad Mini als auch das iPad 2 den ausgefallenen Gyroskop-Teil, so dass das Konzept dieser Überprüfung überhaupt nicht funktioniert hätte.
Jay Freeman -saurik-
8

Fordern Sie alle Benutzer mit dem iPad2-Benutzeragenten auf, ein Foto mit der integrierten Kamera bereitzustellen und die Auflösung mithilfe der HTML-Datei-API zu ermitteln . iPad Mini-Fotos haben aufgrund der Verbesserungen in der Kamera eine höhere Auflösung.

Sie können auch mit dem Erstellen eines unsichtbaren Canvas-Elements herumspielen und es mithilfe der Canvas-API in ein PNG / JPG konvertieren. Ich habe keine Möglichkeit , es zu testen, aber die resultierenden Bits könnten unterschiedlich sein aufgrund des zugrundeliegenden Kompressionsalgorithmus und die Pixeldichte des Gerätes.

Vlad Magdalin
quelle
7

Sie könnten den Benutzer immer fragen?!

Wenn der Benutzer die Schaltflächen oder Inhalte nicht sehen kann, geben Sie ihm eine Möglichkeit, die Skalierung selbst zu verwalten. Sie können der Site jederzeit einige Skalierungsschaltflächen hinzufügen, um den Inhalt (Text / Schaltflächen) zu vergrößern / verkleinern. Dies würde (fast) garantiert für jede aktuelle iPad-Auflösung funktionieren und wahrscheinlich für jede zukünftige Auflösung, für die Apple sich entscheidet.

TK.
quelle
6

Dies ist keine Antwort auf Ihre gestellte Frage, aber ich hoffe, es ist nützlicher, als zu sagen: "Tu das nicht":

Anstatt das iPad Mini zu erkennen, sollten Sie feststellen, dass es einem Benutzer schwer fällt, das Steuerelement zu treffen (oder: in einem Teilbereich des Steuerelements ständig trifft), und die Größe des Steuerelements vergrößern / verkleinern, um sie aufzunehmen.

Benutzer, die größere Steuerelemente benötigen, erhalten diese unabhängig von der Hardware. Benutzer, die keine größeren Steuerelemente benötigen und mehr Inhalte sehen möchten, erhalten diese ebenfalls. Es ist nicht einfach, nur die Hardware zu erkennen, und es wird einige subtile Dinge geben, die richtig sind, aber wenn es sorgfältig gemacht würde, könnte es wirklich schön sein.

Stephen Canon
quelle
6

Das erinnert mich an ein Zitat aus dem Film Equilibrium:

"Was, würden Sie sagen, ist der einfachste Weg, eine Waffe von einem Grammaton-Kleriker wegzubekommen?"

"Du fragst ihn danach."

Wir sind es gewohnt, nach Lösungen zu kämpfen, wenn es manchmal besser ist, zu fragen. (Es gibt gute Gründe, warum wir dies normalerweise nicht tun, aber es ist immer eine Option.) Alle Vorschläge hier sind brillant, aber eine einfache Lösung könnte darin bestehen, dass Ihr Programm fragt, welches iPad sie verwenden, wenn sie es starten .

Ich weiß, dass dies eine freche Antwort ist, aber ich hoffe, es ist eine Erinnerung daran, dass wir nicht um alles kämpfen müssen. (Ich habe mich auf die Abstimmungen vorbereitet .: P)

Einige Beispiele:

  • Die Tastaturerkennung bei Betriebssysteminstallationen kann manchmal eine bestimmte Tastatur nicht erkennen, daher muss das Installationsprogramm nachfragen.
  • Windows fragt, ob ein Netzwerk, mit dem Sie eine Verbindung herstellen, ein Heimnetzwerk oder ein öffentliches Netzwerk ist.
  • Computer können die Person, die es verwenden möchte, nicht erkennen, daher benötigen sie einen Benutzernamen und ein Kennwort.

Viel Glück - ich hoffe, Sie finden eine tolle Lösung! Wenn Sie dies nicht tun, vergessen Sie diesen nicht.

jedd.ahyoung
quelle
Nicht-technische Benutzer wissen dies möglicherweise nicht.
Julian
5

Nicht die Frage beantworten, sondern die Frage hinter der Frage:

Ihr Ziel ist es, die Benutzererfahrung auf einem kleineren Bildschirm zu verbessern. Das Erscheinungsbild der UI-Steuerelemente ist ein Teil davon. Ein weiterer Teil von UX ist die Art und Weise, wie die Anwendung reagiert.

Was ist, wenn Sie den Bereich, der auf Tippen reagiert, so groß gestalten, dass er auf dem iPad Mini benutzerfreundlich ist, während die visuelle Darstellung der Steuerelemente der Benutzeroberfläche so klein bleibt, dass sie auf dem iPad optisch ansprechend ist?

Wenn Sie genügend Taps gesammelt haben, die sich nicht im visuellen Bereich befanden, können Sie die UI-Steuerelemente visuell skalieren.

Als Bonus funktioniert dies auch für große Hände auf dem iPad.

Laurens
quelle
5

Alle Lösungen hier sind nicht zukunftssicher (was Apple daran hindert, ein iPad mit der gleichen Bildschirmgröße wie das iPad 2, aber der gleichen Auflösung wie das iPad Mini herauszubringen). Also kam mir eine Idee:

Erstellen Sie ein Div mit 1 Zoll Breite und hängen Sie es an den Körper an. Dann erstelle ich ein weiteres Div mit 100% Breite und hänge es an den Körper an:

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

Die Funktion jQuery width () gibt immer Werte in Pixel zurück, sodass Sie einfach:

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

screenSize enthält jetzt die für die Anwendung verfügbare Größe in Zoll (Vorsicht bei Rundungsfehlern). Sie können dies verwenden, um Ihre GUI so zu platzieren, wie Sie es möchten. Vergessen Sie auch nicht, die nutzlosen Divs danach zu entfernen.

Beachten Sie auch, dass der von Kaspars vorgeschlagene Algorithmus nicht nur nicht funktioniert, wenn der Benutzer die Anwendung als Vollbild ausführt, sondern auch nicht funktioniert, wenn Apple die Benutzeroberfläche des Browsers patcht.

Dies unterscheidet die Geräte nicht, aber wie Sie in Ihrer Bearbeitung erklärt haben, möchten Sie eigentlich die Bildschirmgröße des Geräts wissen. Meine Idee sagt Ihnen auch nicht genau die Bildschirmgröße, aber sie gibt Ihnen noch nützlichere Informationen, die tatsächliche Größe (in Zoll), die Sie zum Zeichnen Ihrer GUI zur Verfügung haben.

BEARBEITEN: Verwenden Sie diesen Code, um zu überprüfen, ob er tatsächlich auf Ihrem Gerät funktioniert. Ich besitze keine iPads zum Testen.

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

Es sollte ein Fenster mit Ihrer Bildschirmgröße in Zoll angezeigt werden. Es scheint auf meinem Laptop zu funktionieren und gibt 15,49 zurück, während mein Laptop-Bildschirm als 15,4 '' vermarktet wird. Kann jemand dies auf iPads testen und bitte Kommentare posten? Vergessen Sie nicht, es im Vollbildmodus auszuführen.

EDIT2: Es stellt sich heraus, dass die Seite, auf der ich sie getestet habe, widersprüchliches CSS aufwies . Ich habe den Testcode so korrigiert, dass er jetzt richtig funktioniert. Sie benötigen Position: absolut auf den Divs, damit Sie die Höhe in% verwenden können.

EDIT3: Ich habe einige Nachforschungen angestellt, und es scheint, dass es auf keinem Gerät eine Möglichkeit gibt, die Größe des Bildschirms tatsächlich zu ermitteln. Das kann das Betriebssystem nicht wissen. Wenn Sie eine reale Einheit in CSS verwenden, handelt es sich tatsächlich nur um eine Schätzung, die auf einigen Eigenschaften Ihres Bildschirms basiert. Unnötig zu erwähnen, dass dies überhaupt nicht korrekt ist.

Hoffmann
quelle
Hast du es getestet? Ist 1 Zoll wirklich der gleiche physische 1 Zoll auf dem Mini und iPad? Es ist möglich, dass 1 Zoll auf dem Mini nur als 1/2 Zoll angezeigt wird.
Kernel James
Getestet auf iPad 2, 3 und Mini. Alle drei geben 3.8125 zurück.
Alfred
@ AlfredNerstu wow wirklich? Ist das ein bekannter Safari-Fehler? Können Sie es auf Safari für Mac testen?
Hoffmann
@ AlfredNerstu Entschuldigung, der Code war falsch. Ich habe ihn jetzt behoben. Die Seite, auf der ich ihn ursprünglich getestet habe, hatte widersprüchliches CSS, wodurch er irgendwie funktionierte. Es stellt sich heraus, dass Sie Position: absolut auf dem Div benötigen, um Höhenwerte in% zu verwenden. Jetzt gibt mir dieser Code 15,49 Zoll auf meinem 15,4-Zoll-Laptop auf einer "sauberen" Seite (kein CSS und keine Elemente außer den Divs).
Hoffmann
Ich habe den neuen Code ausprobiert und jetzt geben alle 2, 3 und Mini 9.5 zurück. Ich führe den Code in einer jsfiddle aus, weiß nicht, ob das etwas durcheinander bringen könnte? Wahrscheinlicher ist es vielleicht, dass Safari unter iOS für den 9,7-Zoll-Bildschirm entwickelt wurde und 1 Zoll entsprechend rendert?
Alfred
2

Nicht getestet, aber anstatt eine Audiodatei abzuspielen und die Balance zu überprüfen, könnte es funktionieren, das Mikrofon anzuhören, das Hintergrundrauschen zu extrahieren und seine "Farbe" (Frequenzdiagramm) zu berechnen. Wenn das IPad Mini ein anderes Mikrofonmodell als das IPad 2 hat, sollte die Hintergrundfarbe messbar unterschiedlich sein, und einige Audio-Fingerabdrucktechniken können Ihnen dabei helfen, festzustellen, welches Gerät verwendet wird.

Ich denke nicht ernsthaft, dass dies in diesem speziellen Fall machbar und den Aufwand wert sein könnte, aber ich denke, dass Fingerabdrücke der Hintergrundgeräusche in einigen Apps verwendet werden könnten, um Ihnen beispielsweise zu sagen, wo Sie sich befinden, wenn Sie sich in einem Gebäude befinden.

gb.
quelle
2

Aufgrund der Douglas- Frage new webkitAudioContext().destination.numberOfChannelszu iPad 2 habe ich beschlossen, einige Tests durchzuführen.

Überprüfen der Anzahl der Kanäle, die 2auf dem iPad mini zurückgegeben wurden, aber nichts auf dem iPad 2 mit iOS 5 und 2auch mit iOS 6.

Dann habe ich versucht zu überprüfen, ob webkitAudioContext verfügbar ist

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

Gleiches hier iPad Mini und iPad 2 mit iOS 6 geben true zurück, während iPad 2 mit iOS 5 false zurückgibt.

(Dieser Test funktioniert nicht auf dem Desktop. Überprüfen Sie auf dem Desktop, ob webkitAudioContext eine Funktion ist.)

Hier ist der Code, den Sie ausprobieren können: http://jsfiddle.net/sqFbc/

Alfred
quelle
2

Was wäre, wenn Sie ein Bündel von 1 "x1" breiten Divs erstellen und diese einzeln an ein übergeordnetes Div anhängen würden, bis der Begrenzungsrahmen von 1 Zoll auf 2 Zoll sprang? Ein Zoll auf dem Mini entspricht der Größe eines Zolls auf dem iPad, oder?

Scovetta
quelle
1
Also habe ich es versucht, aber auf dem Mini ist ein "Zoll" kleiner als ein "Zoll" auf dem normalen iPad. Dieser Weg wird also nicht funktionieren.
Scovetta
2

In iOS7 gibt es eine systemweite Einstellung, die der Benutzer anpassen kann: Wenn die Dinge zu klein zum Lesen werden, Textgröße kann Einstellung geändert werden.

Diese Textgröße kann verwendet werden, um eine Benutzeroberfläche mit plausiblen Abmessungen zu erstellen, z. B. für eine Schaltfläche (getestet auf dem iPad Mini Retina, um auf Änderungen der Textgrößeneinstellungen zu reagieren):

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

( Beispielschaltfläche CSS dank jsfiddle und cssbuttongenerator)

Srg
quelle
1

Ich erkenne das iPad mini, indem ich eine Leinwand erstelle , die größer ist, als ein iPad mini rendern kann , ein Pixel fülle und dann die Farbe wieder auslese. Das iPad mini liest die Farbe als '000000'. Alles andere rendert es als Füllfarbe.

Teilcode:

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

Ich benötige dies für die Leinwandgröße, damit es in meinem Anwendungsfall eine Funktionserkennung darstellt.

SystemicPlural
quelle