Bagaimanakah Saya Boleh Menggunakan Pertanyaan Media untuk Menyasarkan Peranti Apple iPhone 6, 6 Plus dan Masa Depan?

Pertanyaan Media untuk iPhone 6 dan 6 Plus

Pertanyaan media khusus boleh digunakan untuk menyasarkan peranti seperti iPhone 6 dan 6 Plus. Pertanyaan ini menggunakan pelbagai parameter untuk mengenal pasti peranti yang disasarkan dengan tepat berdasarkan saiz skrin, resolusi dan ciri khusus peranti yang lain.

Pertanyaan iPhone 6

Untuk iPhone 6, pertanyaan media berikut boleh bekerja:

• Lanskap

  @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 2) 
  { }

  Salin selepas log masuk

• Potret

  @media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2) 
  { }

  Salin selepas log masuk
• Lancarkan Imej
• Potret: 750 x 1334 (@2x)
• Lanskap: 1334 x 750 (@2x)
• Ikon Apl: 120 x 120

Pertanyaan iPhone 6 Plus

Untuk iPhone 6 Plus, gunakan media ini pertanyaan:

• Lanskap

  @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px) 
    and (orientation : landscape) 
    and (-webkit-min-device-pixel-ratio : 3) 
  { }

  Salin selepas log masuk

• Potret

  @media only screen 
    and (min-device-width : 414px) 
    and (max-device-width : 736px)
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 3) 
  { }

  Salin selepas log masuk
• Lancarkan Imej
• Potret: 1242 x 2208 (@3x)
• Lanskap: 2208 x 1242 (@3x)
• Ikon Apl: 180 x 180

Pertanyaan Umum untuk iPhone 6 dan 6 Tambahan

Untuk menyasarkan kedua-dua iPhone 6 dan 6 Selain peranti, anda boleh menggunakan pertanyaan berikut:

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px)
{ }

Ramalan Peranti untuk Keluaran Masa Hadapan

Apple telah mengeluarkan maklumat terhad berkenaan peranti masa hadapan, seperti iPhone 7 dan Apple Watch. Walau bagaimanapun, berdasarkan spesifikasi iPhone 6 dan 6 Plus dan menganggap konvensyen penamaan yang serupa, pertanyaan media berikut mungkin berguna pada masa hadapan:

• iPhone 7 (Diramalkan):

  @media screen 
    and (min-device-width : 1080px) 
    and (max-device-width : 1920px) 
    and (min-resolution: 401dpi) 
    and (device-aspect-ratio:16/9) 
  { }
  
  @media screen 
    and (min-device-width : 750px) 
    and (max-device-width : 1334px) 
    and (min-resolution: 326dpi) 
  { }

  Salin selepas log masuk

• Apple Watch (Spekulatif):
  Andaikan saiz skrin sekitar 40mm-42mm:

  @media 
    (max-device-width:42mm) 
    and (min-device-width:38mm) 
  { }

  Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Pertanyaan Media untuk Menyasarkan Peranti Apple iPhone 6, 6 Plus dan Masa Depan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!