Bagaimanakah saya boleh mengesan iPhone dan iPad dengan tepat menggunakan pertanyaan media CSS?

Mengesan iPhone/iPad dengan CSS: Panduan Komprehensif

Menentukan jenis peranti pengguna hanya melalui CSS memberikan cabaran yang sama untuk pembangun . Walaupun pelbagai penyelesaian wujud, satu kaedah popular melibatkan penggunaan pertanyaan media. Walau bagaimanapun, seperti yang diserlahkan dalam soalan baru-baru ini di forum pengaturcaraan, penggunaan @media pegang tangan, hanya skrin dan (lebar peranti maksimum: 480px) { mungkin tidak menghasilkan hasil yang diingini.

Kunci untuk berjaya mengesan iPhone atau iPad menggunakan CSS terletak pada penggunaan pertanyaan media yang sesuai. Contoh berikut memberikan pecahan terperinci:

iPhone & iPod touch:

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="../iphone.css" type="text/css" />

iPhone 4 & iPod touch 4G:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

iPad:

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

Pertanyaan media ini menyasarkan julat peranti tertentu secara berkesan berdasarkan saiz skrin dan nisbah piksel. Dengan memasukkan baris ini ke dalam helaian gaya anda, anda boleh menggunakan gaya tersuai secara dinamik untuk meningkatkan pengalaman pengguna untuk peranti iPhone, iPad dan iPod touch.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengesan iPhone dan iPad dengan tepat menggunakan pertanyaan media CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!