Erkennen Sie das iPad Mini in HTML5

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.

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

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/

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?

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.

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.

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.

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 .

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ß.

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.

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:

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?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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/

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?

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)

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.