Bagaimana untuk Mengesan DPI/PPI dengan Tepat daripada JS/CSS dalam Menghadapi Penipuan Peranti?

Mengesan Sistem DPI/PPI daripada JS/CSS

Latar Belakang

Mengekalkan pengalaman pengguna yang konsisten merentas peranti dengan tetapan DPI/PPI yang berbeza-beza adalah penting untuk aplikasi moden yang menjana imej resolusi tinggi. Walau bagaimanapun, pengesanan DPI/PPI peranti dengan tepat memberikan cabaran, kerana kaedah tradisional mungkin tidak memberikan hasil yang boleh dipercayai.

Pembohongan Peranti: Bacaan 96ppi Palsu

Pendekatan awal anda menggunakan elemen dengan tetapan " 1in" lebar dalam CSS dan menyemak offsetWidthnya kelihatan munasabah. Walau bagaimanapun, iPhone telah diketahui salah melaporkan PPInya, memberikan nilai palsu 96ppi. Bacaan palsu ini menjadikan kaedah ini tidak boleh dipercayai.

Pendekatan Alternatif: Dimensi Paparan Peranti

Satu lagi penyelesaian yang berpotensi adalah untuk mendapatkan semula dimensi paparan peranti dalam inci dan membahagikannya dengan lebar dalam piksel. Walau bagaimanapun, mengakses dimensi ini tidak mudah dalam JS/CSS.

Penyelesaian: DevicePixelRatio

Nasib baik, terdapat kaedah yang boleh dipercayai untuk mendapatkan peranti DPI/PPI:

1. Gunakan window.devicePixelRatio: Sifat ini menyediakan nisbah piksel pada skrin peranti kepada piksel CSS.
2. Buat Elemen Ujian: Cipta elemen halimunan dengan ketinggian dan lebar 1 inci dalam CSS.
3. Dapatkan Resolusi Paparan: Kira DPI/PPI dengan mendarabkan lebar dan tinggi mengimbangi elemen dengan devicePixelRatio.

<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>

Kaedah ini menyediakan bacaan DPI/PPI yang tepat pada pelbagai peranti, termasuk yang mungkin salah melaporkan PPI mereka menggunakan kaedah tradisional.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan DPI/PPI dengan Tepat daripada JS/CSS dalam Menghadapi Penipuan Peranti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!