Abrufen der physischen Bildschirmabmessungen / dpi / Pixeldichte in Chrome unter Android

87

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.

Matanster
quelle
21
Das ist einfach falsch. Meine Benutzeroberfläche möchte wissen, wie groß eine Schaltfläche sein soll, wie der Benutzer sie sieht. Möglicherweise denken Sie als
Codeentwickler
12
Die Größe einer Schaltfläche sollte beispielsweise nicht ein Prozentsatz des Ansichtsfensters sein, sondern groß genug, um sie zu berühren. Ich bin mir nicht sicher, wie das für hochwertiges Design Sinn macht.
Matanster
16
@matt ist absolut korrekt. Einer der wichtigsten Aspekte von Web UX / UI, insbesondere in einer Welt mit fetten Fingern, besteht darin, sicherzustellen, dass die Schaltflächen sowohl für den Zeiger - in diesem Fall einen Finger - als auch für den Betrachtungsabstand geeignet sind vom Bildschirm zum Auge. Dieser neue Bereich mobiler Geräte hat die Angelegenheit kompliziert gemacht, sodass die Erkennung der physischen Bildschirmgröße noch wichtiger ist.
Jason T Featheringham
6
Ich bin zu 100% bei dir @matt. Ich verstehe nicht, warum Mozilla und Google uns nicht einfach eine solche JavaScript-Eigenschaft geben können window.screenDensity, die die physischen Pixel pro Zoll des Geräts enthält, das Sie und ich, matt, von dort übernehmen können. window.screenHeightund window.screenWidthin physischen Millimetern wäre auch schön.
Trusktr
7
@ Kinlan Die physische Bildschirmgröße ist im Allgemeinen wichtig. Aus diesem Grund ist die native Entwicklung derzeit leistungsfähiger als die Webentwicklung. In einer nativen Umgebung kann ich beispielsweise auf allen modernen Geräten eine Schaltfläche mit einer Breite von 1 Zoll (in der realen Welt) erstellen. Soweit ich weiß, ist dies derzeit in einer Webumgebung nicht möglich. Habe ich etwas verpasst
Trusktr

Antworten:

119

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:

Kinlan
quelle
1
@matt wird es auf Tablets gleich sein. Wie bei Retina Mac Büchern. Das Ziel ist, dass das "CSS-Pixel" auf allen Plattformen relativ einheitlich ist, insbesondere wenn Sie die Ansichtsfensterbreite = Gerätebreite festlegen.
Kinlan
14
Sie sagten: "Sie können nichts mit ihnen machen." Ich bin nicht einverstanden. Mit diesen Informationen könnte ich eine Schriftart festlegen, die immer 16 Punkte (16/72 Zoll eines realen Zolls) hoch ist. Das ist von unschätzbarem Wert und einer der Gründe, warum native Entwicklung weiterhin leistungsfähiger ist als Webentwicklung.
Trusktr
7
Tatsächlich besteht eine durchaus vernünftige Verwendung für die tatsächliche Bildschirmgröße in Pixel darin, ein Hintergrundbild mit der entsprechenden Auflösung zu rendern.
WhyNotHugo
2
"50px sollte auf allen Mobilgeräten ungefähr gleich aussehen" Bitte beweisen Sie, dass Sie beispielsweise ein 1200x1920 4-Zoll-Telefon und ein 1000x600 10-Zoll-Tablet nebeneinander verwenden.
Iloveregex
5
Ich bin auch nicht einverstanden mit "Sie können nichts mit ihnen machen": Sie können zuverlässig erkennen, ob es sich bei dem Gerät um ein Telefon oder ein Tablet handelt, und davon ausgehen, dass der Benutzer leicht mit dem Finger auf den Bildschirm zeigen kann oder nicht.
Brian Cannard
11

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.

trusktr
quelle
Ich bin nicht sicher, auf welche Antwort Sie sich beziehen (ich sehe nirgendwo ein "Matt"), aber ich bekomme NaN, weil es svgEl.screenPixelToMillimeterXanscheinend nicht definiert ist.
Michael
7

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>
Mike
quelle
Wow, ich hätte nie gedacht, dass du das mit CSS machen kannst. Wie genau ist das? Woher kennt Ihr Browser die physischen Abmessungen Ihres Bildschirms? Ist die Browserkompatibilität dafür irgendwo auf caniuse.com ? Ich kann es nicht finden
Jake Wilson
3
Auf der W3C-Website heißt es: "In der Vergangenheit erforderte CSS, dass Implementierungen absolute Einheiten auch auf Computerbildschirmen korrekt anzeigen. Da jedoch die Anzahl der falschen Implementierungen die korrekten überstieg und sich die Situation nicht zu verbessern schien, gab CSS diese Anforderung 2011 auf. Derzeit Absolute Einheiten dürfen nur auf gedruckten Ausgaben und auf hochauflösenden Geräten korrekt funktionieren. CSS definiert nicht, was „hohe Auflösung“ bedeutet. Da Low-End-Drucker heutzutage bei 300 dpi beginnen und High-End-Bildschirme bei 200 dpi liegen, Der Cut-Off liegt wahrscheinlich irgendwo dazwischen. "
Mike
1
Ich denke, dass ein Browser wie jede andere native Anwendung eine Geräteauflösung über die Betriebssystem-API erhalten kann, die dem Betriebssystem vom Gerätetreiber bereitgestellt wird. Die Genauigkeit hängt von diesen Informationen ab.
Mike
Die Geräteauflösung entspricht jedoch nicht den tatsächlichen Abmessungen. Ein 14 "Laptop und ein 15" Laptop könnten die gleiche Auflösung haben.
Jake Wilson
5
Nein! Das kannst du nicht. 10 cm in CSS haben in der Realität eine andere Größe. Es ist reine Glückssache, wenn es tatsächlich 10 cm, 12 cm oder 7 cm hat. Hier ist meine jsfiddle-Demo, die auf dieser Lösung basiert und falsche Werte zurückgibt, da sich Browser immer so verhalten, als hätten sie Pixel pro Zoll (dpi): jsfiddle.net/Lzsm3zo9
Dariusz Sikorski
5

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

AturSams
quelle
2

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

Apollo Clark
quelle
3
In der nativen Entwicklung können Sie den genauen Wert erhalten. +1 für native, -1 für Web.
Trusktr
Können Sie die genaue physische Größe in Android erhalten?
Apollo Clark
2

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

Tom
quelle
1

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 .

Jonarnes
quelle
2
Ich schlage vor, dass dies in den Kommentaren zu dieser bestimmten Antwort steht.
Darkgaze
Dies ist eine lächerlich komplizierte Lösung für etwas, das nur nativ vom Browser bereitgestellt werden sollte.
Michael
1

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.

Maciej Krawczyk
quelle
Nein, das kannst du nicht. Medienabfragen machen diesen dummen "96dpi annehmen" Mist, dh sie belügen dich darüber, was die gelesene DPI ist.
Michael
1

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

Dan Kennedy
quelle
0

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

danny117
quelle
3
Dies sind virtuelle Dimensionen, die nicht immer physische reale Dimensionen sind.
Trusktr
Danke, das wusste ich nicht
danny117
0

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>
Pilo
quelle
5
warum pixelDepth?! ist pixelDepth nicht mit der Farbtiefe verbunden, in diesem Fall frage ich mich, wie es für die Berechnung hier relevant ist ....
Matanster
0

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.

Peterk
quelle
-1

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/

Kus
quelle
Mein 40-Zoll als 22-Zoll gemeldet.
RobotRock
Auch für mich nicht genau. Ich denke, das Problem liegt an 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/…
Tom