Adakah @media pegang tangan cara terbaik untuk menyasarkan penyemak imbas mudah alih untuk kebolehaksesan?

CSS @media pegang tangan: Kebolehcapaian untuk Penyemak Imbas Mudah Alih

Menggunakan pertanyaan @media, pembangun boleh menyesuaikan CSS halaman web berdasarkan ciri peranti. Teknik ini amat berguna untuk meningkatkan pengalaman pengguna pada peranti mudah alih seperti iPhone dan Android.

Melaksanakan Gaya Khusus Peranti dengan Pertanyaan @media

Untuk mengubah suai CSS untuk telefon bimbit , gunakan sintaks berikut dalam fail CSS anda:

@media handheld {
  body {
    color: red;
  }
}

Keserasian iPhone

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa peranti Apple iOS seperti iPhone tidak menyokong sepenuhnya pertanyaan media pegang tangan. Sebaliknya, sasarkan mereka secara khusus menggunakan pertanyaan @media berdasarkan lebar skrin. Contohnya:

<link rel="stylesheet" href="iphone.css" media="only screen and (max-device-width:480px)"/>

Penyaringan Peranti Lebih Luas

Dengan peleraian peranti mudah alih yang semakin meningkat, mungkin perlu menyasarkan peranti dengan skrin yang lebih luas. Untuk berbuat demikian, gunakan pertanyaan media yang memeriksa ciri fizikal, seperti peleraian peranti:

<link rel="stylesheet" href="wide-device.css" media="screen and (max-device-width: 854px) and (resolution: 163dpi)"/>

Pertimbangan Tambahan

• A List Apart memberikan gambaran keseluruhan tentang sokongan pertanyaan media merentas peranti mudah alih yang berbeza: https://alistapart.com/article/dates-in-css
• Syor Calon W3C untuk pertanyaan media menawarkan maklumat lanjut: https://www.w3.org/ TR/css3-mediaqueries/

Atas ialah kandungan terperinci Adakah @media pegang tangan cara terbaik untuk menyasarkan penyemak imbas mudah alih untuk kebolehaksesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!