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.

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 .

Das Referenzpixel ist der Sichtwinkel eines Pixels auf einem Gerät mit einer Pixeldichte von 96 dpi und einem Abstand vom Leser von Armlänge. Bei einer nominalen Armlänge von 28 Zoll beträgt der Sichtwinkel daher etwa 0,0213 Grad. Für das Ablesen auf Armlänge entspricht 1px somit etwa 0,26 mm (1/96 Zoll).

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:

• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/set-the-viewport
• https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport
• http://viewportsizes.com/
• http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
• http://en.wikipedia.org/wiki/Device_independent_pixel
• http://www.w3.org/TR/css3-values/#absolute-lengths
• https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Basierend auf Matts Antwort habe ich einen Test gemacht:

// on Macbook Pro Retina (2880x1800, 15.4"), is the calculated diagonal size
// approximately 15.4? Let's see...

var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var screenWidthMillimeters = svgEl.screenPixelToMillimeterX * 2880;
var screenHeightMillimeters = svgEl.screenPixelToMillimeterY * 1800;
var screenDiagonalMillimeters = Math.sqrt(Math.pow(screenWidthMillimeters, 2) + Math.pow(screenHeightMillimeters, 2)); // pythagorean theorem
var screenDiagonalInches = (screenDiagonalMillimeters / 10 / 2.54); // (mm / 10mm/cm) / 2.54cm/in = in

console.log("The calculated diagonal of the screen is "+screenDiagonalInches+" inches. \nIs that close to the actual 15.4\"?");

Dies ist die Ausgabe:

The calculated diagonal of the screen is 35.37742738560738 inches. 
Is that close to the actual value of 15.4?

Nee.

Es scheint also noch keine Möglichkeit zu geben, echte physikalische Werte in einem Webbrowser zu erhalten.

Sie können jedes Seitenelement erstellen und seine Breite mit realen physischen Einheiten festlegen. Beispielsweise

<div id="meter" style="width:10cm"></div>

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

<script>
var pixPer10CM = $('#meter').width();
var CMPerPix = 10 / pixPer10CM;
var widthCM = screen.width * CMPerPix;

alert(widthCM);
</script>

Sie können diese Informationen mit WURFL erhalten:

Eigenschaften der Geräteanzeige

Die Attribute heißen:

resolution_(width|height)

physical_display_(width|height)

Lange Version:

Die beste und zuverlässigste Strategie, um dies zu erreichen, besteht darin, die user agent stringvom Browser an eine DB-ähnliche WURFL(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 WURFLWebsite 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

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

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

Unit    Description
cm      centimeters
mm      millimeters
in      inches (1in = 96px = 2.54cm)
px *    pixels (1px = 1/96th of 1in)
pt      points (1pt = 1/72 of 1in)
pc      picas (1pc = 12 pt)

* Pixels (px) are relative to the viewing device.
For low-dpi devices, 1px is one device pixel (dot) of the display.
For printers and high resolution screens 1px implies multiple device pixels.

Mit dieser Beschreibung scheint es eine Lösung zu geben. cm, mmUnd inwü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 von px, ptoder pckann 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, inund schließlich ptund pc). - 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 sollte px).

Dies ist sowohl ein Implementierungsproblem (tatsächliche Bildschirmgröße wird nicht verwendet) als auch ein Designproblem (warum sollte pxunabhängig von der Bildschirmgröße sein, obwohl es dafür bereits so viele Einheiten gibt).

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 .

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:

@media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dpi)
    {
     /* specific styles for handhelds/ high dpi monitors*/
    }

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.

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">

JqueryMobile Breite des Elements

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

JqueryMobile Höhe des Elements

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

Viel Glück Danny117

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:

var ppi = getPPI();
var x   = ppi * devicePixelRatio * screen.pixelDepth / 24;
$('#Cubo').width (x);
$('#Cubo').height(x);

<div id="Cubo" style="background-color:red;"></div>

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.

    (Not code but I wanted fixed width font)

    Hand held - Phone/Tablet         25cm 
    Touch screen / Desktop Monitor   40cm         ( seated or standing at a counter
                                                    with partially extended arm )
    "Personal" Touch kiosk        50cm -> 80cm ( a bit further away standing 
                                                 extended arms and standing back 
                                                 to view )
    Presentation Screen.          any distance ( angle of view derived from pixel
                                                 width of device. An ideal conventional cinema 
                                                 seat (as opposed to imax or immersive) 
                                                 you want about 50 degrees
                                                 between edges of the screen. from viewer POV )

    So what you want universally available is:

    device usage type.
    finger size in pixels (dots per CM)
    pixel dimensions of display.

    Then internally, when laying out and drawing you want the size/shape of a pixel 
    for the current transform. 

Dies ist, was wir versuchen, in unseren APIs bereitzustellen, aber leider in vielen Fällen schwer zu bekommen.

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.

var $el = document.createElement('div');
$el.style.width = '1cm';
$el.style.height = '1cm';
$el.style.backgroundColor = '#ff0000';
$el.style.position = 'fixed';
$el.style.bottom = 0;
document.body.appendChild($el);
var screenDiagonal = Math.sqrt(Math.pow((window.screen.width / $el.offsetWidth), 2) + Math.pow((window.screen.height / $el.offsetHeight), 2));
var screenDiagonalInches = (screenDiagonal / 2.54);
var str = [
  '1cm (W): ' + $el.offsetWidth + 'px',
  '1cm (H): ' + $el.offsetHeight + 'px',
  'Screen width: ' + window.screen.width + 'px',
  'Screen height: ' + window.screen.height + 'px',
  'Browser width: ' + window.innerWidth + 'px',
  'Browser height: ' + window.innerHeight + 'px',
  'Screen available width: ' + window.screen.availWidth + 'px',
  'Screen available height: ' + window.screen.availHeight + 'px',
  'Screen width: ' + (window.screen.width / $el.offsetWidth).toFixed(2) + 'cm',
  'Screen height: ' + (window.screen.height / $el.offsetHeight).toFixed(2) + 'cm',
  'Screen diagonal: ' + screenDiagonal.toFixed(2) + 'cm',
  'Screen diagonal: ' + screenDiagonalInches.toFixed(2) + 'in',
  'Device Pixel Ratio: ' + (window.devicePixelRatio || 1)
].join('\n');
var $pre = document.createElement('pre');
$pre.innerHTML = str;
document.body.appendChild($pre);

http://codepen.io/kus/full/xOAPYB/