Wie kann ich mit JavaScript die DPI/PPI eines Geräts genau erkennen?

Geräte-DPI/PPI-Erkennung in JS/CSS

Die Bestimmung der Bildschirmauflösung eines Geräts ist entscheidend für die Generierung von Bildern in geeigneten Größen. Das Erkennen der System-DPI oder PPI direkt aus JavaScript oder CSS stellt jedoch eine Herausforderung dar.

Ein vorgeschlagener Ansatz besteht darin, ein Element zu erstellen, dessen Breite in CSS auf „1 Zoll“ festgelegt ist, und dessen OffsetWidth zu messen. Allerdings erweist sich diese Methode auf Geräten wie iPhones, die fälschlicherweise einen DPI-Wert von 96 melden, als unzuverlässig.

Eine alternative Strategie besteht darin, die Abmessungen des Displays in Zoll zu ermitteln und diese durch die Breite in Pixel zu dividieren. Die Umsetzung dieses Ansatzes erfordert die folgenden Schritte:

1. Erstellen Sie ein unsichtbares Element mit den Abmessungen 1 x 1 Zoll.
2. Positionieren Sie das Element außerhalb des Bildschirms, um Störungen des Layouts zu vermeiden.
3. Berechnen Sie das Gerätepixelverhältnis (DPR) mit window.devicePixelRatio oder standardmäßig 1.
4. Multiplizieren Sie offsetWidth und offsetHeight des Elements durch den DPR, um die horizontale und vertikale DPI zu bestimmen.

Unten ist ein JavaScript-Codeausschnitt, der diesen Ansatz demonstriert:

<div>

Dieser Ansatz erfasst die DPI genau /PPI des Geräts, was eine präzise Generierung gerätespezifischer Bilder ermöglicht.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript die DPI/PPI eines Geräts genau erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!