Bolehkah JavaScript atau CSS Menentukan DPI/PPI Sistem dengan Tepat?

Menentukan Sistem DPI/PPI Menggunakan JavaScript/CSS

Dalam dunia pembangunan web, mencipta imej yang menyesuaikan dengan lancar kepada pelbagai resolusi paparan adalah penting. Walau bagaimanapun, mencapai ketepatan ini boleh menjadi mencabar, terutamanya apabila memenuhi keperluan peranti pelbagai dengan ketumpatan piksel yang berbeza. Timbul persoalan: adakah mungkin untuk mengesan nilai DPI/PPI sistem secara automatik menggunakan JavaScript atau CSS?

Percubaan dan Kekecewaan Awal

Penjelajahan awal mungkin membawa kepada cadangan seperti mencipta elemen dengan lebar 1 inci dalam CSS dan menyemak offsetWidthnya. Walaupun teknik ini kelihatan logik, ia mempunyai batasannya. Sebagai contoh, iPhone mungkin memberikan bacaan yang tidak tepat menggunakan pendekatan ini.

Penyelesaian Alternatif

Pendekatan alternatif melibatkan memperoleh dimensi paparan dalam inci dan membahagikan dengan lebar piksel. Walau bagaimanapun, kaedah ini memerlukan cara untuk mengakses dimensi fizikal paparan, yang tidak mudah.

Penyelesaian Berasaskan JavaScript

Penyelesaian JavaScript yang menjanjikan memanfaatkan sifat devicePixelRatio bersama-sama dengan elemen dengan ketinggian dan lebar 1 inci tersembunyi di luar skrin. Kod ini mengira nilai DPI berdasarkan dimensi piksel elemen ini, didarab dengan nisbah piksel peranti, menawarkan mekanisme pengesanan yang boleh dipercayai.

const testDiv = document.getElementById('testdiv');
const devicePixelRatio = window.devicePixelRatio || 1;
const dpiX = testDiv.offsetWidth * devicePixelRatio;
const dpiY = testDiv.offsetHeight * devicePixelRatio;

console.log(dpiX, dpiY);

Dengan melaksanakan pendekatan ini, pembangun boleh menentukan DPI/PPI dengan tepat nilai peranti pengguna, membolehkan penjanaan imej yang tepat disesuaikan dengan resolusi skrin tertentu.

Atas ialah kandungan terperinci Bolehkah JavaScript atau CSS Menentukan DPI/PPI Sistem dengan Tepat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!