it-swarm.com.de

Wie kann ich über Javascript auf die DPI-Einstellungen der Bildschirmanzeige zugreifen?

Gibt es eine Möglichkeit, in einer Javascript-Funktion auf die DPI-Einstellungen des Bildschirms zuzugreifen?

Ich versuche, ein HTML-Bedienfeld auf der Seite zu positionieren. Wenn der DPI-Wert des Benutzers auf groß (120) eingestellt ist, wird die Position deaktiviert. Ich muss in der Lage sein zu wissen, was der DPI ist, damit ich die Position entsprechend anpassen kann.

48
Yttrium

Erstens, um bei der möglichen (und sehr häufigen) Verwechslung mit dem Begriff DPI (Punkte pro Zoll) zu helfen:

DPI ist nicht genau ein Teil der "Anzeigeeinstellungen". Es wird in zwei verschiedenen Kontexten (falsch) verwendet:

  1. Die nativen Pixel pro Zoll einer Anzeige (oder eines Videos). Es bestimmt, wie klein die Pixel sind. Sie können die gleiche Auflösung von 1024 x 768 sowohl auf einem 14 "-Laptop-Bildschirm als auch auf einem 17" -Monitor verwenden LCD). Ersteres wäre ungefähr 1280/14 = 91 DPI und letzteres wäre ungefähr 1280/17 = 75 DPI Die DPI eines Bildschirms ist unveränderlich und kann mit den Anzeigeeinstellungen nicht geändert werden. Mehr ...
  2. Die Punkte pro Zoll werden beim Drucken auf Papier gedruckt. Dies ist die Anzahl der nebeneinander angeordneten Punkte, die ein Drucker/Kopierer/Faxgerät auf einem Zoll Papier drucken kann. Die meisten Drucker können auf einen niedrigeren DPI-Wert eingestellt werden, indem Sie jeden Punkt als zwei, vier usw. Punkte drucken. Mehr ...

Beim Drucken eines Bildes wirken sich viele Faktoren auf die endgültigen Abmessungen des Bildes auf Papier aus:

  • Die Abmessungen des Quellbilds - dies ist die Anzahl der Pixel oder Daten, die vorhanden sind.
  • Die DPI des Quellbilds. Dieser Wert legt fest, wie die Abmessungen beim Drucken des Bildes interpretiert werden sollen.
  • Wenn im Quellbild keine DPI-Informationen eingebettet sind (ein JPEG kann eine haben, ein GIF nie), kann das verwendete Programm Einstellungen zur Angabe einer DPI enthalten. Dies kann ein Bildbetrachter/-editor oder sogar ein Webbrowser sein.
  • Der Zoomfaktor, der normalerweise in einem Druckdialog angegeben wird.
  • Die aktuelle DPI-Einstellung des Druckers.
  • Die physische (maximale) DPI des Druckers.

Die Quintessenz ist, dass das Bild, das Sie drucken, effektiv neu abgetastet (verkleinert oder vergrößert) wird, um es an die endgültige DPI anzupassen, die im Druckprozess verwendet wird. Dies kann durch eine der beteiligten Parteien verursacht werden (das Programm, der Druckertreiber, der Drucker).

Kommen wir nun zu Ihrer Frage zurück. Nein, Sie können den DPI-Wert des Bildschirms nicht bestimmen, da er nicht in der Softwaredomäne liegt. Es ist ein Begriff für eine Hardwaredomäne, der beschreibt, wie groß ein Monitor sein kann, den sich ein Benutzer leisten kann.  Update: Diese Antwort habe ich zum ersten Mal im Jahr 2009 mit meinem Verständnis der aktuellen Technologien geschrieben. Wie @thure bereits betont hat, können Sie jetzt (seit 2012?) Die Funktion window.matchMedia verwenden, um die DPI des Bildschirms zu bestimmen.

Wenn Sie versuchen, beim Drucken eines HTML-Layouts Präzision zu erzielen, wie andere vorgeschlagen haben, sollte Ihr CSS Druckabmessungen wie "em", "pt" oder "pc" anstelle von "px" verwenden. Das endgültige Ergebnis hängt jedoch möglicherweise vom verwendeten Browser ab. Wenn Sie Ihren HTML-Code in PDF (oder PDF von Grund auf neu erstellen)) konvertieren möchten, können Sie ein PDF) drucken geben Sie Ihnen das wahrste WYSIWYG sowohl auf dem Bildschirm als auch auf Papier.

36
Ates Goral

Sieht so aus, als könnten Sie das DOM-Objekt 'screen' im IE verwenden, dessen Eigenschaften für deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI festgelegt sind.

https://www.w3schools.com/jsref/obj_screen.asp

Hier ist eine Lösung von http://www.webdeveloper.com/forum/showthread.php?t=175278 (Ich habe es nicht ausprobiert, scheint wie ein totaler Hack :) Erstellen Sie einfach etwas 1 Zoll breit und messe es in Pixeln!

HTML:

<div id="dpi"></div>

Stil:

#dpi {
  height: 1in;
  left: -100%;
  position: absolute;
  top: -100%;
  width: 1in;
}

Javascript:

function getDPI() {
  return document.getElementById("dpi").offsetHeight;
}
39
Ryan

Sie können das window.devicePixelRatio Eigenschaft, um das Skalierungsverhältnis des Bildschirms/der Seite zu erhalten. Dies funktioniert gut in aktuellen IE, Edge, Chrome und Firefox auf dem Desktop (Windows), aber es scheint kein aktueller Standard zu sein. Auf meinem Desktop-PC gibt es mit einem herkömmlichen 1 zurück Monitor und 2 auf der Oberfläche mit 200% Skalierung. Die Werte sollten heutzutage zwischen 1,0 und 3,0 liegen. Ich könnte dies verwenden, um die Größe der dynamischen Bildbereitstellung zu korrigieren und schärfere Bilder auf hochauflösenden Bildschirmen bereitzustellen.

Wenn Sie logische dpi/ppi benötigen, multiplizieren Sie diesen Wert mit 96. Dies ist jedoch nicht der tatsächliche physikalische ppi, sondern genau das, wie das Betriebssystem ihn behandelt.

17
ygoe

Mir ist kein Weg bekannt, aber sie könnten eine alternative Lösung sein:

Geben Sie Ihre Messungen in 'pt' und 'em' an, die bildschirmrelative Metriken sind.

http://www.w3schools.com/cssref/css_units.asp

https://css-tricks.com/the-lengths-of-css/

  • em:
    1em Entspricht der aktuellen Schriftgröße. 2em Bedeutet die doppelte Größe der aktuellen Schriftart. Wenn beispielsweise ein Element mit einer Schriftart von 12 pt Angezeigt wird, ist '2em'24 pt. Das 'em' Ist eine sehr nützliche Einheit in CSS, da es sich automatisch an die vom Leser verwendete Schriftart anpassen kann
  • pt:
    Punkt (1 pt ist dasselbe wie 1/72 inch)
  • pc:
    pica (1 pc ist dasselbe wie 12 points)
4
Kent Fredric