Bagaimanakah Saya Boleh Mengesan DPI/PPI Peranti Dengan Tepat Menggunakan JavaScript?

Pengesanan DPI/PPI Peranti dalam JS/CSS

Menentukan resolusi paparan peranti adalah penting untuk menjana imej pada saiz yang sesuai. Walau bagaimanapun, pengesanan sistem DPI atau PPI secara langsung daripada JavaScript atau CSS menimbulkan cabaran.

Salah satu pendekatan yang dicadangkan ialah mencipta elemen dengan lebarnya ditetapkan kepada "1in" dalam CSS dan mengukur offsetWidthnya. Walau bagaimanapun, kaedah ini terbukti tidak boleh dipercayai pada peranti seperti iPhone, yang secara palsu melaporkan DPI sebanyak 96.

Strategi alternatif melibatkan mendapatkan dimensi paparan dalam inci dan membahagikannya dengan lebar dalam piksel. Melaksanakan pendekatan ini memerlukan langkah berikut:

1. Buat elemen halimunan dengan dimensi 1x1 inci.
2. Letakkan elemen di luar skrin untuk mengelakkan gangguan pada reka letak.
3. Kira nisbah piksel peranti (DPR) menggunakan window.devicePixelRatio atau lalai kepada 1.
4. Darabkan offsetWidth dan offsetHeight elemen dengan DPR untuk menentukan DPI mendatar dan menegak.

Di bawah ialah coretan kod JavaScript yang menunjukkan pendekatan ini:

<div>

Pendekatan ini menangkap DPI/PPI peranti dengan tepat, membolehkan penjanaan tepat imej khusus peranti.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan DPI/PPI Peranti Dengan Tepat Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!