Wie kann man DPI/PPI von JS/CSS angesichts der Gerätetäuschung genau erkennen?

Erkennung der System-DPI/PPI anhand von JS/CSS

Hintergrund

Die Aufrechterhaltung einer konsistenten Benutzererfahrung auf allen Geräten mit unterschiedlichen DPI/PPI-Einstellungen ist von entscheidender Bedeutung für moderne Anwendungen, die hochauflösende Bilder erzeugen. Die genaue Erkennung der DPI/PPI des Geräts stellt jedoch Herausforderungen dar, da herkömmliche Methoden möglicherweise keine zuverlässigen Ergebnisse liefern.

Gerät lügt: Ein falscher 96ppi-Wert

Ihr erster Ansatz unter Verwendung eines Elements mit einem festen „ Die Angabe einer Breite von 1 Zoll in CSS und die Überprüfung der OffsetWidth erscheinen sinnvoll. Es ist jedoch bekannt, dass das iPhone seinen PPI falsch angibt und einen falschen Wert von 96 ppi angibt. Dieser falsche Messwert macht diese Methode unzuverlässig.

Alternativer Ansatz: Abmessungen der Geräteanzeige

Eine andere mögliche Lösung besteht darin, die Abmessungen der Geräteanzeige in Zoll abzurufen und sie durch die Breite in Pixel zu dividieren. Allerdings ist der Zugriff auf diese Dimensionen in JS/CSS nicht einfach.

Lösung: DevicePixelRatio

Glücklicherweise gibt es eine zuverlässige Methode, um die Geräte-DPI/PPI zu erhalten:

1. Verwenden Sie window.devicePixelRatio: Diese Eigenschaft gibt das Verhältnis von Pixeln auf dem Bildschirm des Geräts zu CSS-Pixeln an.
2. Erstellen Sie ein Testelement: Erstellen Sie ein unsichtbares Element mit eine Höhe und Breite von 1 Zoll in CSS.
3. Anzeigeauflösung abrufen: Berechnen Sie den DPI/PPI, indem Sie die Offset-Breite und -Höhe des Elements mit dem devicePixelRatio multiplizieren.

<code class="javascript">const testDiv = document.createElement('div');
testDiv.style.height = '1in';
testDiv.style.left = '-100%';
testDiv.style.position = 'absolute';
testDiv.style.top = '-100%';
testDiv.style.width = '1in';
document.body.appendChild(testDiv);

const DPI_X = testDiv.offsetWidth * window.devicePixelRatio;
const DPI_Y = testDiv.offsetHeight * window.devicePixelRatio;

console.log(DPI_X, DPI_Y);</code>

Diese Methode liefert genaue DPI/PPI-Messwerte auf verschiedenen Geräten, einschließlich solchen, die ihren PPI mit herkömmlichen Methoden möglicherweise falsch angeben.

Das obige ist der detaillierte Inhalt vonWie kann man DPI/PPI von JS/CSS angesichts der Gerätetäuschung genau erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!