Bagaimanakah Saya Boleh Mengesan iPhone dan iPad Menggunakan Pertanyaan Media CSS?

Pengesanan Peranti iPhone/iPad Menggunakan CSS

Dalam usaha untuk mengoptimumkan pengalaman pengguna dan menyampaikan kandungan yang disesuaikan, pembangun web sering mencari kaedah untuk mengesan peranti tertentu hanya melalui CSS. Satu pendekatan sedemikian ialah untuk membezakan antara iPhone dan iPad menggunakan pertanyaan media.

Pendekatan Pertanyaan Media

Penyelesaian yang dicadangkan dalam urutan sedia ada mencadangkan penggunaan peraturan @media bersama-sama dengan parameter pegang tangan dan (lebar peranti maks: 480px). Walau bagaimanapun, teknik ini mungkin tidak memberikan hasil yang diingini.

Penyelesaian Alternatif

Untuk menangani isu ini, pendekatan yang lebih komprehensif diperlukan. Dengan memanfaatkan pertanyaan media tertentu, seseorang boleh menyasarkan iPhone, iPad dan variasinya dengan berkesan.

iPhone & iPod Touch

Untuk mengesan peranti iPhone dan iPod Touch, gunakan pertanyaan media berikut:

@media only screen and (max-device-width: 480px) {
  /* Styles for iPhone & iPod Touch */
}

iPhone 4 & iPod Touch 4G

Untuk model iPhone 4 dan iPod Touch 4G, gunakan pertanyaan media berikut:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles for iPhone 4 & iPod Touch 4G */
}

iPad

Untuk mengenal pasti iPad, gunakan pertanyaan media berikut:

@media only screen and (max-device-width: 1024px) {
  /* Styles for iPad */
}

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan iPhone dan iPad Menggunakan Pertanyaan Media CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!