Bagaimanakah saya boleh menyasarkan iPad secara khusus dengan pertanyaan media CSS, sementara tidak termasuk tablet lain seperti LG 3D Pad dan Galaxy Tab?

Pertanyaan Media CSS untuk Menyasarkan iPad

Menyasarkan peranti tertentu dengan pertanyaan media CSS boleh menjadi mencabar, terutamanya apabila berbilang peranti berkongsi dimensi yang sama. Dalam kes ini, matlamatnya adalah untuk menyasarkan iPad sahaja manakala mengecualikan tablet lain seperti LG 3D Pad dan Galaxy Tab.

Dimensi Peranti dan Resolusi Skrin

The iPad mempunyai resolusi skrin 1024 x 768 piksel, iaitu lebar yang sama dengan Pad 3D LG tetapi bukan Galaxy Tab. LG Pad mempunyai resolusi 1280 x 768 piksel, manakala Galaxy Tab mempunyai resolusi 1280 x 800 piksel.

Pertanyaan Media CSS Standard

Media yang disediakan pertanyaan tidak mencukupi untuk menyasarkan iPad sahaja. Ciri lebar peranti min dan lebar peranti maks tidak boleh membezakan antara iPad dan LG Pad, kerana kedua-duanya mempunyai lebar peranti 768px. Begitu juga, sifat resolusi min dan lebar peranti maks tidak boleh membezakan antara peranti kerana julat resolusi dikongsi 132dpi. Sifat nisbah aspek peranti juga tidak membezakan antara iPad dan LG Pad.

Pertanyaan Media CSS Khusus Peranti

Untuk menyasarkan iPad secara eksklusif, kita mesti gunakan pertanyaan media CSS khusus peranti. Pertanyaan media berikut boleh digunakan untuk menyasarkan iPad dalam orientasi potret dan landskap:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  /* CSS rules for iPad portrait */
}

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  /* CSS rules for iPad landscape */
}

Pertanyaan media ini menentukan dimensi dan orientasi peranti yang tepat, memastikan ia digunakan hanya pada iPad. Dengan menggunakan pertanyaan ini, anda boleh menggunakan gaya secara khusus pada iPad sambil mengekalkan gaya yang berbeza untuk peranti lain.

Pertimbangan Tambahan

Untuk mengelakkan panggilan HTTP yang tidak diperlukan, anda boleh memasukkan CSS khusus peranti dalam fail CSS biasa anda yang sedia ada:

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

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

Pendekatan ini membolehkan anda menyasarkan iPad secara khusus sambil meminimumkan permintaan HTTP.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyasarkan iPad secara khusus dengan pertanyaan media CSS, sementara tidak termasuk tablet lain seperti LG 3D Pad dan Galaxy Tab?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!