it-swarm.com.de

IPad Mini in HTML5 erkennen

Apples iPad Mini ist in mehr als jeder anderen Hinsicht ein kleinerer Klon des iPad 2. In JavaScript ist das window.navigator object weist für den Mini und das iPad 2 dieselben Werte auf. Meine bisherigen Tests zum Erkennen des Unterschieds haben nicht zum Erfolg geführt.

Warum ist das wichtig?

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

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

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

  • window.devicepixelratio
  • CSS Elementbreite in cm Einheit
  • CSS-Medienabfragen (z. B. resolution und -webkit-device-pixel-ratio)
  • SVG-Zeichnungen in ähnlichen Einheiten
  • Alle Arten von CSS-Webkit-Transformationen für eine festgelegte Zeit ausführen und gerenderte Frames mit requestAnimFrame zählen (ich hatte gehofft, einen messbaren Unterschied zu erkennen)

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

Update Vielen Dank für die bisherigen Antworten. Ich möchte zu Leuten, die gegen das Erkennen von iPad mini gegen 2 stimmen, wie folgt Stellung nehmen: Apple hat uhm, eine Richtlinie, die sie alle regiert. Okay, hier ist meine Begründung, warum ich der Meinung bin, dass es im Internet wirklich Sinn macht Welt zu wissen, ob eine Person ein iPad mini oder ein 2. verwendet. Und mit meinen Überlegungen zu tun, was Sie mögen.

Das iPad mini ist nicht nur ein viel kleineres Gerät (9,7 Zoll gegenüber 7,9 Zoll), sondern sein Formfaktor ermöglicht eine andere Nutzung. 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 Spielen, wenn Sie ihn in einer Hand halten und eine andere zum Streichen oder Tippen oder so weiter verwenden. Als Spieldesigner 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 einem A/B-Test 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 daher einen virtuellen Fingerzeig aus und stellen Sie eine andere tippbasierte Steuerung auf den Bildschirm (hier nur ein willkürliches Beispiel), wenn der Player die lädt Spiel zum ersten Mal ist das, was ich und wahrscheinlich auch andere Spieledesigner gerne in der Lage sein würden zu tun.

Meiner Meinung nach geht dies über die Diskussionen mit dicken Fingern/Richtlinien hinaus und ist nur etwas, was Apple und alle anderen Anbieter sollten es tun: Ermöglichen Sie uns, Ihr Gerät eindeutig zu identifizieren und Denken Sie anders als , indem Sie Richtlinien befolgen.

376
Martin Kool

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 hatte 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 bitte diese Seite und helfen Sie mir, Daten für diese verrückte Idee zu sammeln. Ich habe kein iPad mini und brauche dringend deine Hilfe.

253
Avi Marcus

Update:Es sieht so aus Diese Werte geben die Breite und Höhe des Ansichtsfensters zum Zeitpunkt der Registerkartenerstellung an und ändern sich beim Drehen nicht. Diese Methode kann nicht zur Geräteerkennung verwendet werden!

Sie können entweder screen.availWidth oder 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/

132
Kaspars

Ich verstehe, dass dies eine etwas einfache Lösung sein könnte, aber da wir noch nichts anderes zu finden scheinen.

Ich gehe davon aus, dass Sie bereits nach den meisten anderen Geräten suchen, sodass die folgenden Szenarien möglich sind.

Sie könnten nach ALLEN möglichen populärsten Geräten suchen, die spezielle CSS/Größen erfordern, und wenn es mit keinem von ihnen übereinstimmt, 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 ein dummer Ansatz ist, aber wenn wir derzeit keine Möglichkeit haben, zu entscheiden, ob es sich 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.

Um die bestmögliche Browser-Erfahrung zu erzielen, wählen Sie unten das von Ihnen verwendete Gerät aus.

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 mit dem, was Sie clientseitig in Javascript können und was nicht. Ich weiß, dass Sie die IP eines Benutzers erhalten können, aber ist es möglich, die Mac-Adresse eines Benutzers zu erhalten? Unterscheiden sich diese Bereiche zwischen iPad2 und iPad Mini?

84
flexd

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 mit dem entsprechenden Gerät zu verknüpfen.

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

Dieser Wert kann leicht durch einen regulären Ausdruck auf dem Benutzeragenten (window.navigator.userAgent); dieser Nummer ist das Präfix "Mobile/ ".

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

74

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

Apple scheint absichtlich zu versuchen, Sie nicht den Unterschied erkennen zu lassen. Apple scheint nicht zu wollen, dass wir unterschiedlichen Code für die verschiedenen Größenversionen von iPads schreiben. Ich bin kein Teil von Apple Ich weiß das nicht für Ich sage nur, dass es so aussieht. Wenn die Entwicklergemeinde einen schicken Detektor für iPad - Minis findet, könnte Apple) diesen Detektor absichtlich in zukünftigen Versionen von brechen iOS. Apple möchte, dass Sie Ihre minimale Zielgröße auf 44 iOS-Punkte festlegen. iOS zeigt diese in zwei Größen an: die größere iPad-Größe und die kleinere iPhone/iPad-Mini-Größe. 44 Punkte viel großzügig, und Ihre Benutzer werden sicherlich wissen, ob sie auf dem kleineren iPad sind, so können sie selbst kompensieren.

Ich schlage vor, zu Ihrem angegebenen Grund für die Nachfrage nach dem Detektor zurückzukehren: Anpassen der Zielgröße für den Komfort des Endbenutzers. Wenn Sie sich für eine Größe auf dem großen iPad und eine andere Größe auf dem kleinen iPad entscheiden, entscheiden Sie, dass alle Menschen die gleichen Fingergrößen haben. Wenn Ihr Design eng genug ist, dass der Unterschied in der Größe von einem iPad 2 und einem iPad mini einen Unterschied macht, wird die Größe der Finger zwischen mir und meiner Frau einen größeren Unterschied machen. Kompensieren Sie also die Fingergröße des Benutzers und 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. Hier ist jedoch, 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 rücken 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 ein größeres Maß an Bildschirmpunkten als auf einem iPad 2. Bei einem Spiel können Sie dies als Kalibrierungsschritt bezeichnen oder auch nicht. Habe es als Startschritt. Lassen Sie den Spieler beispielsweise in einem Schießspiel die Munition mit einer Kneifbewegung in die Waffe stecken.

69
Mr. Berna

Bitten Sie den Benutzer, sein iPad aus einer Höhe von mehreren tausend Fuß über dem Boden abzulegen. 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 höheren Widerstandsbeiwert und sollte die Endgeschwindigkeit in kürzerer Zeit erreichen als ein iPad Mini .

Hier ist ein Beispielcode, um Ihnen den Einstieg zu erleichtern.

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

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

31
Jason

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: „ Es wurde bestätigt, dass der iPad Mini User Agent mit dem iPad 2 identisch ist “ . Ich habe buchstäblich Hunderte von Antworten erhalten, in denen darauf hingewiesen wird, dass das Aufspüren von Benutzeragenten eine schlechte Praxis ist und dass wir Funktionen und keine Geräte usw. erkennen sollten.

Na ja Leute, ihr habt recht, aber es hat keinen direkten Zusammenhang mit dem Problem. Und ich muss die zweite schlechte Nachricht hinzufügen: Es gibt keine clientseitige Technik, um eine "Feature-Erkennung" durchzuführen, auch nicht .

28
BenM

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

Zum Beispiel scheint diese Seite darauf hinzudeuten, dass Sie den rotationRate -Wert nur erhalten können, wenn das Gerät über ein Gyroskop verfügt.

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

26
Assaf Lavie

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 mit 0.0..1.0 Aus window.navigator.webkitBattery.level Abrufen. Auf einer bestimmten Ebene, entweder in der Hardware oder in der Software, wird dies wahrscheinlich als CurrentLevel / TotalLevel Berechnet, wobei beide Werte ints sind. In diesem Fall ergibt sich ein Float, der ein Vielfaches von 1 / TotalLevel Ist. Wenn Sie viele Batteriestandwerte von beiden Geräten ablesen und battery.level * n Berechnen, können Sie möglicherweise einen Wert von n finden, bei dem alle Ergebnisse nahe an ganzen Zahlen liegen, was Ihnen iPad2TotalLevel und iPadMiniTotalLevel.

Wenn diese beiden Zahlen unterschiedlich sind und sich gegenseitig eine Primzahl verleihen, können Sie in der Produktion battery.level * iPad2TotalLevel Und battery.level * iPadMiniTotalLevel Berechnen. Je nachdem, welcher Wert näher an einer Ganzzahl liegt, wird angezeigt, welches Gerät verwendet wird.

Entschuldigen Sie die Anzahl der Wenns in dieser Antwort! Hoffentlich kommt etwas Besseres.

20
Douglas

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

Die eigentliche Frage hat meiner Meinung nach nichts mit dem iPad X im Vergleich zum iPad mini zu tun. Ich denke, es geht darum, die Abmessungen und Platzierung der Benutzeroberflächenelemente entsprechend der Ergonomie des Benutzers zu optimieren. Sie müssen die Größe der Finger des Benutzers bestimmen, um die Größe und möglicherweise die Positionierung Ihres Benutzeroberflächenelements zu steuern. Auch dies ist und sollte wahrscheinlich erreicht werden, ohne dass Sie tatsächlich wissen müssen, auf welchem ​​Gerät Sie ausgeführt werden. Lassen Sie es uns übertreiben: Ihre App läuft auf einem 40-Zoll-Bildschirm. Kenne weder Marke noch Modell oder DPI. Wie dimensionieren Sie die Steuerelemente?

Sie müssen eine Schaltfläche anzeigen, die das Torelement in der Site/im Spiel darstellt. Ich überlasse es Ihnen zu entscheiden, wo oder wie es Sinn macht, dies zu tun.

Während der Benutzer dies als einen einzelnen Knopf sieht, besteht es in Wirklichkeit aus einer Matrix von kleinen dicht gedrängten Knöpfen, die visuell abgedeckt sind, um als ein einziges Knopfbild zu erscheinen. Stellen Sie sich eine Schaltfläche mit 100 x 100 Pixeln vor, die aus 400 Schaltflächen mit jeweils 5 x 5 Pixeln besteht. Sie müssen experimentieren, um zu sehen, was hier Sinn macht und wie klein Ihre Stichproben sein müssen.

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:

button 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 Elemente der Benutzeroberfläche 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 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 sense_array-Schaltfläche als Teil des Eingabeprozesses in der 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 der Benutzer oder eine Möglichkeit zum Auswählen des zu spielenden Levels usw. Sie haben die Idee. Die sense_array-Schaltfläche kann sich an einer beliebigen Stelle befinden, die der Benutzer berühren muss, um in das Spiel einzusteigen.

EDIT 2: Ich stelle nur fest, dass Sie wahrscheinlich nicht so viele Sensortasten benötigen. Eine Reihe konzentrischer Kreise oder Schaltflächen, die wie ein riesiger Stern angeordnet sind * könnte gut tun. Du musst experimentieren.

Mit meiner alten Antwort 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 vergrößern.

Wenn ich mit nativen iOS-Apps überhaupt etwas gelernt habe, ist es der Versuch, zu überlisten Apple ist eine Formel für unangemessene Schmerzen und Ärger. Wenn sie es nicht zulassen, dass Sie das Gerät identifizieren, liegt es daran, Nun, in ihrem Sandkasten solltest du nicht.

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

18
martin's

Wie wäre es mit einem Mikro-Benchmark? Berechnen Sie einen Wert, der ungefähr X Mikrosekunden auf dem iPad 2 und Y Sekunden auf dem iPad mini benötigt.

Es ist wahrscheinlich nicht genau genug, aber es könnte eine Anweisung geben, bei der der Chip des iPad mini effizienter ist.

11
Les

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

Habe keine iPads zum Ausprobieren.

11
lc0

Fordern Sie alle Benutzer mit dem iPad2-Benutzeragenten auf, ein Foto einzureichen mit der eingebauten Kamera und die Auflösung mit 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 ein unsichtbares Zeichenflächenelement erstellen und es mit der Zeichenflächen-API in eine PNG/JPG-Datei konvertieren. Ich kann es nicht testen, aber die resultierenden Bits können aufgrund des zugrunde liegenden Komprimierungsalgorithmus und der Pixeldichte des Geräts unterschiedlich sein .

8
Vlad Magdalin

Sie könnten den Benutzer immer fragen ?!

Wenn der Benutzer die Schaltflächen oder Inhalte nicht sehen kann, geben Sie ihm die Möglichkeit, die Skalierung selbst zu verwalten. Sie können jederzeit einige Skalierungsschaltflächen zur Site 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 Apple, die sie vornehmen möchten.

7
TK.

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

Anstatt das iPad Mini zu erkennen, können Sie feststellen, dass ein Benutzer Schwierigkeiten hat, auf das Steuerelement zuzugreifen (oder: trifft ständig auf einen Unterbereich des Steuerelements zu), 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 gibt einige subtile Dinge, die zu korrigieren sind, aber wenn es sorgfältig gemacht würde, könnte es wirklich nett sein.

6
Stephen Canon

Das erinnert mich an ein Zitat aus dem Film Equilibrium:

"Was, würdest du sagen, ist der einfachste Weg, eine Waffe von einem Grammatik-Geistlichen wegzubekommen?"

"Du fragst ihn danach."

Wir sind es so gewohnt, für 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 sein, dass Sie Ihr Programm fragen lassen, welches iPad sie verwenden, wenn sie es starten .

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

Einige Beispiele:

  • Die Tastaturerkennung bei Betriebssysteminstallationen kann manchmal eine bestimmte Tastatur nicht erkennen, daher muss der Installer 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 sie verwenden soll, nicht erkennen. Sie benötigen daher einen Benutzernamen und ein Kennwort.

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

6
jedd.ahyoung

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

Ihr Ziel ist es, das Benutzererlebnis 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 Berührungen reagiert, groß genug machen, um auf dem iPad Mini benutzerfreundlich zu sein, während Sie die visuelle Darstellung der Benutzeroberflächen-Steuerelemente klein genug halten, um auf dem iPad optisch ansprechend zu sein?

Wenn Sie genügend Abgriffe 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.

5
Laurens

Alle Lösungen hier sind nicht zukunftssicher (was verhindert, dass Apple ein iPad mit der gleichen Bildschirmgröße wie das iPad 2, aber der gleichen Auflösung wie das iPad Mini herausbringt). Also kam ich auf eine Idee :

Erstellen Sie ein Div mit einer Breite von 1 Zoll 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 Folgendes tun können:

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

screenSize enthält jetzt die Größe , die der Anwendung zur Verfügung steht, in Zoll (Vorsicht bei Rundungsfehlern). Sie können das verwenden, um Ihre GUI so zu platzieren, wie Sie es mögen. Vergessen Sie auch nicht, die unbrauchbaren Teile danach zu entfernen.

Beachten Sie auch, dass der von Kaspars vorgeschlagene Algorithmus nicht nur dann nicht funktioniert, wenn der Benutzer die Anwendung im Vollbildmodus ausführt, sondern auch dann nicht funktioniert, wenn Apple) die Browser-Benutzeroberfläche korrigiert.

Dies wird die Geräte nicht unterscheiden, aber wie Sie in Ihrer Bearbeitung erklärt haben, ist das, was Sie tatsächlich wissen möchten, die Bildschirmgröße des Geräts. Meine Idee sagt Ihnen auch nicht genau die Bildschirmgröße, aber sie gibt Ihnen noch nützlichere Informationen, nämlich 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, auf denen ich es testen könnte.

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 15,49 zurückzugeben, 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 stellte sich heraus, dass die Seite, auf der ich es getestet habe, widersprüchliche CSS hatte =. Ich habe den Testcode repariert, damit er jetzt richtig funktioniert. Sie benötigen die Position: absolut auf den Divs, damit Sie die Höhe in% verwenden können.

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

5
Hoffmann

Basierend auf Douglas der Frage zu new webkitAudioContext().destination.numberOfChannels auf iPad 2 habe ich mich entschlossen, einige Tests durchzuführen.

Überprüfung von numberOfChannels ergab 2 auf dem iPad mini, aber nichts auf dem iPad 2 mit iOS 5 und 2 auch mit iOS 6.

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

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

Gleiches gilt für iPad Mini und iPad 2 mit iOS 6, 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 zum Ausprobieren: http://jsfiddle.net/sqFbc/

2
Alfred

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 helfen, das verwendete Gerät zu bestimmen.

Ich glaube nicht ernsthaft, dass es in diesem speziellen Fall machbar und lohnenswert ist, aber ich denke, dass Fingerabdruck des Hintergrundrauschens in einigen Apps verwendet werden könnte, um Ihnen beispielsweise zu sagen, wo Sie wann sind sind in einem Gebäude.

2
gb.

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

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

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

( sample button CSS, dank jsfiddle und cssbuttongenerator)

2
Srg

Was ist, wenn Sie ein Bündel von 1 "x1" breiten Divs erstellt und diese nacheinander an ein übergeordnetes Div angehängt haben, bis der Begrenzungsrahmen von 1 Zoll auf 2 Zoll gesprungen ist? Ein Zoll auf dem Mini ist genauso groß wie ein Zoll auf dem iPad, oder?

2
Scovetta

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

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 Bemaßung der Zeichenfläche, damit in meinem Anwendungsfall die Funktion erkannt wird.

1
SystemicPlural