Bagaimana untuk Menyasarkan iPad Secara Khusus dengan Pertanyaan Media CSS?

Merancang Pertanyaan Media CSS untuk Menyasarkan iPad Secara Eksklusif

Apabila bekerja dengan pelbagai peranti tablet seperti iPad, Galaxy Tab, Acer Iconia dan LG 3D Pad, tugas untuk menyasarkan peranti tertentu dengan pertanyaan media CSS boleh menjadi mencabar, terutamanya apabila peranti tersebut berkongsi sifat yang serupa. Ambil iPad dan LG Pad sebagai contoh; kedua-duanya mempunyai lebar peranti 768px, menjadikannya sukar untuk membezakannya.

Untuk menyelesaikan isu ini dan menyasarkan iPad secara eksklusif menggunakan pertanyaan media CSS3, pertimbangkan penyelesaian berikut:

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css">

Ini pendekatan menyasarkan iPad dengan tepat dengan mentakrifkan kriteria lebar, ketinggian dan orientasi peranti tertentu.

Sebagai alternatif, untuk meminimumkan permintaan HTTP, anda boleh membenamkan pertanyaan media dalam fail CSS sedia ada anda:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* CSS rules for iPad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* CSS rules for iPad landscape */
}

Rujuk sumber berikut untuk mendapatkan maklumat lanjut:

• [Kesan Platform Peranti Berbeza Menggunakan CSS](https://css-tricks.com/snippets/css/detect-different-device-platforms- using-css/)
• [Ciri CSS3 Standard Lain](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html)

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan iPad Secara Khusus dengan Pertanyaan Media CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!