Bagaimana untuk Menyasarkan iPad Eksklusif dengan Pertanyaan Media CSS?

Pertanyaan Media CSS: Menyasarkan iPad Secara Eksklusif

Cabaran:

Menyasarkan peranti iPad secara khusus telah terbukti menjadi satu cabaran kepada bertindih lebar peranti dengan tablet lain. Menggunakan pertanyaan media CSS tradisional dengan syarat lebar min/maks tidak memisahkan iPad dengan berkesan daripada peranti lain seperti LG Pad dan Galaxy Tab.

Penyelesaian:

Sesuatu yang berjaya penyelesaian melibatkan penggunaan ketinggian peranti dan keadaan orientasi dalam kombinasi dengan lebar peranti. Pertanyaan media berikut akan mengasingkan gaya khusus untuk iPad:

• Orientasi Potret:

  <code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    /* iPad Portrait styles */
  }</code>

  Salin selepas log masuk

• Orientasi Landskap:

  <code class="css">@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    /* iPad Landscape styles */
  }</code>

  Salin selepas log masuk

Dengan memanfaatkan pertanyaan media ini, anda boleh menggunakan gaya tertentu pada peranti iPad sambil mengecualikan tablet lain dengan lebar peranti yang serupa. Untuk mengoptimumkan panggilan HTTP, anda boleh memasukkannya ke dalam fail CSS biasa anda yang sedia ada menggunakan peraturan @media yang disediakan.

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