Bagaimana untuk Menyasarkan iPad Secara Eksklusif Menggunakan Pertanyaan Media CSS?

Menyasarkan iPad Secara Eksklusif Menggunakan Pertanyaan Media CSS

Dalam persekitaran berbilang peranti, mengasingkan peranti tertentu boleh menjadi mencabar, terutamanya apabila ia berkongsi dimensi yang serupa. Satu kes sedemikian ialah membezakan iPad daripada tablet lain seperti LG Pads dan Galaxy Tabs, yang kesemuanya mempunyai lebar peranti 768px.

Untuk menangani masalah ini, pertanyaan media CSS menawarkan penyelesaian. Walau bagaimanapun, kaedah konvensional seperti lebar peranti min dan lebar peranti maks adalah tidak berkesan kerana lebar bertindih.

Penyelesaian:

Akhir sekali, kaedah memanfaatkan peranti ketinggian menyelesaikan isu:

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

Penyelesaian ini menyasarkan peranti dengan lebar 768px, ketinggian 1024px dan sama ada orientasi potret atau landskap, mengasingkan iPad dengan berkesan.

Untuk meminimumkan panggilan HTTP , pertanyaan media boleh dibenamkan dalam fail CSS utama:

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

Selain itu, rujuk sumber berikut untuk mendapatkan lebih banyak cerapan:

• https://developer.apple. com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

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