Frage
Gibt es eine sichere Möglichkeit, in Chrome unter Android die tatsächlich korrekten Abmessungen des Bildschirms zu ermitteln? Bei Bedarf können alte Versionen von Chrome und Android nicht berücksichtigt werden.
Vorherige Forschung
Es gibt zahlreiche Sackgassenfragen zum Stapelüberlauf, um die tatsächlichen physischen Bildschirmabmessungen eines Geräts aus Javascript (oder CSS) abzurufen. Es scheint keine Konvergenz zwischen der HTML-API-Standardisierung und den tatsächlichen Browser-Implementierungen zu geben, ganz zu schweigen davon, dass die Browser-Implementierung auf Betriebssystem-APIs beruht, die wiederum auf Hardware basieren, die die richtigen Informationen liefert.
Einige frühere Antworten sind übrigens geheimnisvoll (Jahr 2011 und dergleichen), wenn man von einer bestimmten Pixeldichte ausgeht, die zu diesem Zeitpunkt vorherrschte, und daher nutzlos. Andere beziehen sich auf das Webkit, während Chrome Blink das Webkit in Chrome (?) Ersetzt hat.
Ich möchte die Existenz einer einfachen Lösung untersuchen, indem ich die Dinge nur auf Chrome unter Android beschränke.
Hinweis
Hier geht es um eine Javascript- (oder CSS-) Lösung im Browser, nicht um eine Lösung für eine native App.
quelle
window.screenDensity
, die die physischen Pixel pro Zoll des Geräts enthält, das Sie und ich, matt, von dort übernehmen können.window.screenHeight
undwindow.screenWidth
in physischen Millimetern wäre auch schön.Antworten:
Sie können die tatsächlichen physischen Abmessungen oder die tatsächliche DPI nicht wirklich ermitteln, und selbst wenn Sie könnten, können Sie nichts damit anfangen.
Dies ist eine ziemlich lange und komplexe Geschichte, also vergib mir.
Das Web und alle Browser definieren 1px als eine Einheit, die als CSS-Pixel bezeichnet wird. Ein CSS-Pixel ist kein echtes Pixel, sondern eine Einheit, die basierend auf dem Betrachtungswinkel des Geräts als 1/96 Zoll angenommen wird. Dies wird als Referenzpixel angegeben .
In 0,26 mm Raum haben wir möglicherweise sehr viele reale Gerätepixel.
Der Browser tut dies hauptsächlich aus alten Gründen - die meisten Monitore hatten 96 dpi, als das Web geboren wurde -, aber auch aus Gründen der Konsistenz war in früheren Zeiten eine 22px-Taste auf einem 15-Zoll-Bildschirm mit 800x600 doppelt so groß wie eine 22px-Taste ein 15 Zoll Monitor bei 1600x1200. In diesem Fall beträgt die DPI des Bildschirms tatsächlich das Zweifache (doppelte doppelte Auflösung horizontal, jedoch im selben physischen Raum). Dies ist eine schlechte Situation für das Web und Apps. Daher haben die meisten Betriebssysteme viele Möglichkeiten entwickelt, um Pixelwerte in geräteunabhängige Einheiten zu abstrahieren (DIPS unter Android, PT unter iOS und CSS Pixel im Web ).
Der iPhone Safari-Browser war (meines Wissens) der erste, der das Konzept eines Ansichtsfensters einführte. Dies wurde erstellt, damit Anwendungen im vollständigen Desktop-Stil auf einem kleinen Bildschirm gerendert werden können. Das Ansichtsfenster wurde mit einer Breite von 960 Pixel definiert. Dadurch wurde die Seite im Wesentlichen dreimal verkleinert (das iPhone war ursprünglich 320 Pixel groß), sodass 1 CSS-Pixel 1/3 eines physischen Pixels entspricht. Wenn Sie jedoch ein Ansichtsfenster definiert haben, kann dieses Gerät 1 CSS-Pixel = 1 echtes Pixel bei 163 dpi entsprechen.
Durch die Verwendung eines Ansichtsfensters mit der Breite "Gerätebreite" müssen Sie die Breite des Ansichtsfensters nicht mehr pro Gerät auf die optimale CSS-Pixelgröße einstellen. Der Browser erledigt dies nur für Sie.
Mit der Einführung von Geräten mit doppelter DPI wollten die Mobiltelefonhersteller nicht, dass mobile Seiten 50% kleiner erscheinen, und führten daher ein Konzept namens devicePixelRatio ein (ich glaube, zuerst im mobilen Webkit), mit dem sie 1 CSS-Pixel auf ungefähr 1 / halten können 96. Zoll, aber lassen Sie sich verstehen, dass Ihre Assets wie Bilder möglicherweise doppelt so groß sein müssen. Wenn Sie sich die iPhone-Serie ansehen, sagen alle Geräte, dass die Bildschirmbreite in CSS-Pixeln 320 Pixel beträgt , obwohl wir wissen, dass dies nicht der Fall ist.
Wenn Sie eine Schaltfläche so eingestellt haben, dass sie im CSS-Bereich 22 Pixel groß ist, beträgt die Darstellung auf dem physischen Bildschirm 22 * Gerätepixelverhältnis. Eigentlich sage ich das, es ist nicht genau das, weil das Pixelverhältnis des Geräts auch nie exakt ist. Die Telefonhersteller haben es auf eine nette Zahl wie 2.0, 3.0 anstatt 2.1329857289918 eingestellt.
Zusammenfassend lässt sich sagen, dass CSS-Pixel geräteunabhängig sind und wir uns keine Gedanken über die physische Größe der Bildschirme und die Anzeigedichten usw. machen müssen.
Die Moral der Geschichte lautet: Machen Sie sich keine Sorgen um das Verständnis der physischen Pixelgröße des Bildschirms. Du brauchst es nicht. 50px sollte auf allen Mobilgeräten ungefähr gleich aussehen, es kann jedoch leicht variieren, aber das CSS-Pixel ist unsere geräteunabhängige Methode zum Erstellen konsistenter Dokumente und Benutzeroberflächen
Ressourcen:
quelle
Basierend auf Matts Antwort habe ich einen Test gemacht:
Dies ist die Ausgabe:
Nee.
Es scheint also noch keine Möglichkeit zu geben, echte physikalische Werte in einem Webbrowser zu erhalten.
quelle
svgEl.screenPixelToMillimeterX
anscheinend nicht definiert ist.Sie können jedes Seitenelement erstellen und seine Breite mit realen physischen Einheiten festlegen. Beispielsweise
Und dann erhalten Sie seine Breite in Pixel. Zum Beispiel zeigt der folgende HTML-Code (ich habe JQuery verwendet) die Bildschirmbreite des Geräts in Zentimetern
quelle
Sie können diese Informationen mit WURFL erhalten:
Eigenschaften der Geräteanzeige
Die Attribute heißen:
Lange Version:
Die beste und zuverlässigste Strategie, um dies zu erreichen, besteht darin, die
user agent string
vom Browser an eine DB-ähnlicheWURFL
(oder eine andere) aktuelle DB zu senden , die die erforderlichen Informationen bereitstellen kann.User Agent-Zeichenfolge
Dies ist eine Information, die alle modernen Browser bereitstellen können. Es zeigt Informationen über das Gerät und sein Betriebssystem an. Es ist einfach nicht aussagekräftig genug für Ihre Anwendung ohne die Hilfe eines Wörterbuchs wie
WURFL
.WURFL
Dies ist eine Datenbank, die häufig zum Erkennen von Geräteeigenschaften verwendet wird.
Damit können Sie möglicherweise die meisten gängigen Geräte auf dem Markt genau unterstützen. Ich würde eine Code-Demo veröffentlichen, aber eine ist mit dem Download auf der
WURFL
Website verfügbar . Eine solche Demo finden Sie im Ordner examples / demo, der mit der Bibliothek heruntergeladen wird.Laden Sie WURFL herunter
Hier finden Sie weitere Informationen und Erläuterungen zum Überprüfen der physischen Größe und Auflösung: http://www.scientiamobile.com/forum/viewtopic.php?f=16&t=286
quelle
Ich habe dieses Problem mit einem meiner Webprojekte gelöst. Http://www.vinodiscover.com Die Antwort ist, dass Sie nicht sicher wissen können, wie groß die physische Größe ist, aber Sie können eine Annäherung erhalten. Mithilfe von JS und / oder CSS können Sie die Breite und Höhe des Ansichtsfensters / Bildschirms sowie die Pixeldichte mithilfe von Medienabfragen ermitteln. Beispiel: iPhone 5 (326 ppi) = 320 x 568 Pixel und 2,0 Pixel Dichte, während ein Samsung Galaxy S4 (441 ppi) = 360 Pixel x 640 Pixel und 3,0 Pixel Dichte. Tatsächlich liegt eine Dichte von 1,0 Pixeln bei etwa 150 ppi.
Vor diesem Hintergrund habe ich mein CSS so eingestellt, dass 1 Spalte angezeigt wird, wenn die Breite weniger als 284 Pixel beträgt, unabhängig von der Pixeldichte. dann zwei Spalten zwischen 284px und 568px; dann 3 Spalten über 852px. Es ist viel einfacher als es scheint, da die Browser jetzt die Pixeldichteberechnungen automatisch durchführen.
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
quelle
Als Ergänzung zur Antwort "Es gibt keine gute Lösung für dieses Problem" überprüfen Sie einfach die Einheiten, die Sie in CSS https://www.w3schools.com/cssref/css_units.asp verwenden können
Mit dieser Beschreibung scheint es eine Lösung zu geben.
cm
,mm
Undin
würde etwas mit der gleichen Größe zu ziehen , unabhängig von der Bildschirmgröße und Auflösung verwendet werden. In diesem Sinne kann man erwarten , dass mindestens eines vonpx
,pt
oderpc
kann verwendet werden , auf Pixelebene zu zeichnen, für was auch immer Präzision Sie verwenden möchten (sonst, was ist der Punkt auf Millionen von Pixeln, nicht wahr?). Nun, nein. Alle Einheiten sind Bruchteile einer metrischen Einheit, wodurch alle diese Einheiten nur unterschiedliche Maßstäbe haben. Und das Schlimmste in der Geschichte ist die Tatsache, dass keines davon korrekt ist. Spielen Sie einfach mit dem Beispiel von w3schools (zeichnen Sie eine 20-cm-Linie und messen Sie sie mit einem Lineal).Also am Ende: - es gibt keine Möglichkeit , genau etwas mit physischen Dimensionen zu ziehen (was der Fall sein soll
cm
,mm
,in
und schließlichpt
undpc
). - Es gibt keine Möglichkeit, unabhängig von Bildschirmgröße und Auflösung etwas mit derselben Größe zu zeichnen (was zumindest bei mindestens der Fall sein solltepx
).Dies ist sowohl ein Implementierungsproblem (tatsächliche Bildschirmgröße wird nicht verwendet) als auch ein Designproblem (warum sollte
px
unabhängig von der Bildschirmgröße sein, obwohl es dafür bereits so viele Einheiten gibt).quelle
Als Antwort auf die Antwort von zehelvion über die Verwendung von WURFL zum Ermitteln der Auflösung ist auch zu erwähnen, dass WURFL auch als JavaScript-Snippet verfügbar ist .
In der auf wurfl.io angebotenen kostenlosen Version erhalten Sie zwar keine Informationen über Bildschirm und Auflösung (nur Gerätename, Formfaktor und mobil / nicht mobil), aber es gibt auch eine kommerzielle Version mit mehr Funktionen, die hier verfügbar ist .
quelle
CSS-Pixel sind nicht wirklich unser "geräteunabhängiges Pixel". Die Webplattform besteht aus verschiedenen Gerätetypen. Während CSS-Pixel auf Handhelds ziemlich konsistent aussehen, sind sie auf einem typischen 96-dpi-Desktop-Monitor 50% größer. Siehe meine Frage . Dies ist in einigen Fällen wirklich keine schlechte Sache, z. B. sollten Schriftarten auf einem größeren Bildschirm größer sein, da der Abstand zum Auge größer ist. Die Abmessungen der UI-Elemente sollten jedoch ziemlich konsistent sein. Angenommen, Ihre App hat eine obere Leiste. Sie möchten lieber, dass sie auf Desktop und Handy die gleiche Dicke hat. Standardmäßig ist sie 50% kleiner, was nicht gut ist, da berührbare Elemente größer sein sollten. Die einzige Problemumgehung, die ich gefunden habe, besteht darin, verschiedene Stile basierend auf der Geräte-DPI anzuwenden.
Mit window.devicePixelRatio können Sie Bildschirm-DPI in JavaScript abrufen. Oder CSS-Abfrage:
Ich weiß jedoch nicht, wie die Anwendung auf einem Desktop-Monitor mit hoher Auflösung funktionieren würde. Vielleicht wären die Elemente zu klein. Es ist wirklich eine Schande, dass die Webplattform nichts Besseres bietet. Ich denke, dass die Implementierung von Dip nicht zu schwierig wäre.
quelle
Ich habe in Ihren Kommentaren festgestellt, dass Sie sich tatsächlich mit der Größe befasst haben, mit der Schaltflächen usw. dem Betrachter angezeigt werden.
Ich hatte das gleiche Problem, bis ich herausfand, dass es nur darum ging, dem HTML-Header ein Meta-Tag hinzuzufügen, um die anfängliche Skalierung festzulegen:
<meta name="viewport" content="width=device-width, initial-scale=1">
quelle
JqueryMobile Breite des Elements
JqueryMobile Höhe des Elements
Viel Glück Danny117
quelle
Verwenden Sie die Funktion getPPI () ( Mobile Web: Wie erhalte ich die physische Pixelgröße? ), Um eine 1-Zoll-ID zu erhalten, verwenden Sie diese Formel:
quelle
Ich wünschte, ich könnte darauf antworten, aber Geeks, die APIs erstellen, bieten manchmal nicht die Grundbedürfnisse und abstrakten Dinge ein bisschen zu viel.
Übrigens habe ich 40 Jahre Erfahrung im UI- und Software-Design-Design und habe mich bemüht, genau dies für immer zu haben, seit es vor den Tagen der "VESA" -Treiber für immer scheint :).
Für den Touchscreen hatte ich eine Sache namens "fingerSize ()", bei der die Anzahl der Pixel 1 cm betrug (sehr nahe am Durchmesser der durchschnittlichen Berührungsfläche des Fingers), aber das Stammdatum ist "dpcm".
Das andere, was Sie für eine Anzeige wünschen, ist "Blickwinkel". Der Typ des Anzeigegeräts für die Anzeige- und Berührungsfunktion definiert den Betrachtungsabstand ziemlich genau.
Dies ist, was wir versuchen, in unseren APIs bereitzustellen, aber leider in vielen Fällen schwer zu bekommen.
quelle
Sie können eine grobe Schätzung der Größe erhalten, diese ist jedoch nicht genau.
Ich habe ein Beispiel zusammengestellt, das ich auf einigen Geräten getestet habe, um die Ergebnisse zu sehen. Mein iPhone 6 gibt Werte zurück, die um 33% größer sind. Mein 27 "Desktop-Monitor auf meinem Mac wurde als 30" Monitor gemeldet.
http://codepen.io/kus/full/xOAPYB/
quelle
window.devicePixelRatio
. Es ist 1 auf einem Apple Thunderbolt-Bildschirm und 2 auf einem Macbook Pro Touchbar 15 ". Ist dieser Wert immer eine Ganzzahl? Dies wäre nicht sinnvoll, da es sich um ein Verhältnis handelt. Andere Elemente: stackoverflow.com/questions/16385573/…