Bagaimanakah Saya Boleh Menyasarkan Peranti iOS Menggunakan Pertanyaan Media CSS?

Penyasaran Peranti iOS Menggunakan Pertanyaan Media CSS

Dalam bidang reka bentuk responsif, adalah perlu untuk menyesuaikan halaman web kepada peranti tertentu. Satu keperluan biasa ialah untuk menyasarkan peranti iOS sahaja.

Pertanyaan Media untuk Peranti iOS

Walaupun tiada pertanyaan @media khusus semata-mata untuk iOS, terdapat penyelesaian menggunakan peraturan @supports:

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

Prinsip Di Sebalik Pertanyaan

Pertanyaan ini memanfaatkan sifat "-webkit-touch-callout", yang dilaksanakan secara eksklusif oleh Safari Mobile pada iOS. Dengan menyemak sokongannya, kami boleh membezakan peranti iOS daripada yang lain.

Faedah dan Kaveat

• Teknik ini membolehkan penyasaran tepat peranti iOS tanpa menjejaskan peranti lain platform dengan dimensi skrin yang serupa.
• Adalah penting untuk ambil perhatian bahawa @supports tidak berfungsi dalam Internet Explorer.
• Walaupun ia berfungsi pada iOS pada masa ini, tiada jaminan bahawa Apple tidak akan menghentikan sokongan secara berperingkat dalam keluaran masa hadapan.

Pendekatan Alternatif

Tapak web pembangun Apple menawarkan senarai komprehensif sifat CSS yang disokong oleh Safari pada iOS. Dengan menyelidik sifat ini, anda mungkin mencari alternatif tambahan untuk menyasarkan peranti iOS.

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