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

Bitten Sie den Benutzer, sein iPad aus mehreren tausend Metern Höhe 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 Widerstandskoeffizienten und sollte die Endgeschwindigkeit in kürzerer Zeit erreichen als ein iPad Mini .

Hier ist ein Beispielcode, der Ihnen den Einstieg erleichtern soll.

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

Sie müssen diesen Code mit ziemlicher Sicherheit überarbeiten, wenn Apple unweigerlich das nächste iPad mit einem anderen Formfaktor herausbringt. Aber ich bin mir sicher, dass Sie auf dem Laufenden bleiben und diesen Hack für jede neue Version des iPad pflegen werden.

Answer 2

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 festgestellte Problem getwittert: " I bestätigt, dass der iPad Mini User Agent der gleiche ist wie der des iPad 2 " Ich habe buchstäblich Hunderte von Antworten erhalten, die besagen, dass User Agent [ ] Geräte erkennen sollten, etc, etc.

Ja, Jungs, ihr habt Recht, aber es hat keinen direkten Bezug zu dem Problem. Und ich muss die zweite schlechte Nachricht hinzufügen: t clientseitige Technik, um die "Merkmalserkennung" weder .

Answer 3

Das ist ein wilder Schuss, aber einer der Unterschiede zwischen dem iPad 2 und dem iPad mini ist, dass das iPad 2 kein 3-Achsen-Gyroskop hat. Vielleicht wird es möglich sein, die WebKit-API für die Geräteausrichtung zu verwenden, um zu sehen, welche Art von Informationen man daraus erhalten kann.

Zum Beispiel, diese Seite scheint darauf hinzudeuten, dass man nur die rotationRate Wert, wenn das Gerät über ein Gyroskop verfügt.

Leider kann ich keinen funktionierenden POC geben - ich habe keinen Zugang zu einem iPad mini. Vielleicht kann jemand, der ein bisschen mehr über diese Orientierung APIs weiß hier chime in.

Answer 4

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

Wenn iOS 6 dies unterstützt, können Sie den aktuellen Akkustand unter 0.0..1.0 mit window.navigator.webkitBattery.level . Auf irgendeiner Ebene, entweder in der Hardware oder in der Software, wird dies wahrscheinlich wie folgt berechnet CurrentLevel / TotalLevel , wobei beide Ints sind. Wenn ja, ergibt das einen Float, der ein Vielfaches von 1 / TotalLevel . Wenn Sie viele Batteriestandsmessungen von beiden Geräten vornehmen und Folgendes berechnen battery.level * n können Sie vielleicht einen Wert für n finden, bei dem alle Ergebnisse nahe an ganzen Zahlen liegen, was Ihnen folgende Ergebnisse liefert iPad2TotalLevel y iPadMiniTotalLevel .

Wenn diese beiden Zahlen unterschiedlich sind und sich gegenseitig primär sind, dann kann man in der Produktion berechnen battery.level * iPad2TotalLevel y battery.level * iPadMiniTotalLevel . Der Wert, der näher an einer ganzen Zahl liegt, gibt an, welches Gerät verwendet wird.

Entschuldigen Sie bitte die vielen Wenns in dieser Antwort! Hoffentlich kommt noch etwas Besseres.

Answer 5

EDIT 1: Meine ursprüngliche Antwort lautete: "Tun Sie es nicht". Im Interesse einer positiven Einstellung:

Die eigentliche Frage hat meiner Meinung nach nichts mit dem iPad X vs. iPad mini zu tun. Ich denke, es geht darum, die Abmessungen und die Platzierung von UI-Elementen für die Ergonomie des Nutzers zu optimieren. Sie müssen die Größe des Fingers/der Finger des Nutzers bestimmen, um die Größe und vielleicht auch die Positionierung der Oberflächenelemente zu bestimmen. Auch dies ist möglich und sollte wahrscheinlich auch möglich sein, ohne dass Sie wissen müssen, auf welchem Gerät Sie gerade arbeiten. Übertreiben wir mal: Ihre Anwendung läuft auf einem Bildschirm mit 40 Zoll Diagonale. Sie kennen weder die Marke und das Modell noch den DPI-Wert. Wie können Sie die Größe der Steuerelemente bestimmen?

Sie müssen eine Schaltfläche anzeigen, die das Eingangselement zur Website/zum Spiel darstellt. Ich überlasse es Ihnen, zu entscheiden, wo oder wie dies sinnvollerweise geschehen soll.

Während der Benutzer dies als eine einzige Schaltfläche sieht, besteht sie in Wirklichkeit aus einer Matrix von kleinen, dicht gepackten Schaltflächen, die optisch so verdeckt sind, dass sie wie eine einzige Schaltfläche aussehen. Stellen Sie sich eine 100 x 100 Pixel große Schaltfläche vor, die aus 400 Schaltflächen mit jeweils 5 x 5 Pixeln besteht. Sie müssen experimentieren, um herauszufinden, was hier Sinn macht und wie klein Ihre Stichprobe sein muss.

Mögliches CSS für Schaltflächen-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 die daraus resultierende Anordnung:

Wenn der Benutzer das Tastenfeld berührt, erhalten Sie ein Bild der Kontaktfläche des Fingers des Benutzers. Sie können dann beliebige (wahrscheinlich empirisch abgeleitete) Kriterien verwenden, um zu einer Reihe von Zahlen zu gelangen, die Sie zur Skalierung und Positionierung der verschiedenen UI-Elemente entsprechend Ihren Anforderungen verwenden können.

Das Schöne an diesem Ansatz ist, dass Sie sich nicht mehr darum kümmern müssen, mit welchem Gerätenamen oder Modell Sie es zu tun haben. Alles, was Sie interessiert, ist die Größe des Fingers des Benutzers im Verhältnis zum Gerät.

Ich könnte mir vorstellen, dass diese sense_array-Schaltfläche als Teil des Eingabeprozesses in die Anwendung ausgeblendet werden kann. Wenn es sich zum Beispiel um ein Spiel handelt, gibt es vielleicht eine Schaltfläche "Spielen" oder verschiedene Schaltflächen mit den Namen des Benutzers oder eine Möglichkeit, den Level auszuwählen, den er spielen möchte, usw. Du verstehst die Idee. Die sense_array-Schaltfläche könnte sich überall dort befinden, wo der Benutzer sie berühren muss, um in das Spiel zu gelangen.

EDIT 2: Ich möchte nur darauf hinweisen, dass Sie wahrscheinlich nicht so viele Sensortasten benötigen. Eine Reihe von konzentrischen Kreisen oder Schaltflächen, die wie ein großes Sternchen angeordnet sind * könnte genau richtig sein. Sie müssen experimentieren.

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

ALTE ANTWORT:

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

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

Wenn ich bei der Entwicklung nativer iOS-Apps überhaupt etwas gelernt habe, dann, dass der Versuch, Apple zu überlisten, eine Formel für unangemessenen Schmerz und Verärgerung ist. Wenn sie Ihnen nicht erlauben, das Gerät zu identifizieren, dann deshalb, weil Sie das in ihrer Sandbox nicht dürfen.

Ich frage mich, ob Sie die Größe/Position im Hoch- oder Querformat anpassen.