Mengapa Pertanyaan Media Saya Tidak Berfungsi pada Penyemak Imbas, Tetapi Berfungsi pada Peranti Mudah Alih?

Pertanyaan Media: Menyesuaikan Gaya untuk Resolusi Peranti Tertentu

Sifat @media min-width & max-width memberikan kawalan terperinci ke atas gaya berdasarkan pada resolusi peranti. Walau bagaimanapun, isu biasa timbul apabila menggunakan persediaan ini: ia berfungsi pada peranti mudah alih tetapi tidak dalam penyemak imbas.

Punca Isu

Isu ini berpunca daripada kewujudan teg meta yang menyatakan lebar port pandangan dan kebolehskalaan pengguna. Dengan menggunakan teg meta ini, anda secara berkesan mengatasi tetapan lalai peranti. Oleh itu, peraturan @media berdasarkan dimensi peranti menjadi tidak tepat.

Penyelesaian: Menyusun Semula Gaya

Penyelesaian adalah untuk menyusun semula CSS untuk mengutamakan gaya lalai untuk penyemak imbas lama yang jangan sokong @media. Kemudian, gunakan peraturan @media untuk menggunakan gaya khusus untuk peleraian peranti yang berbeza. Berikut ialah pendekatan yang disyorkan:

/* Default styles for older browsers */
body {
  font-size: 16px;
}

/* Styles for larger browsers (>= 960px) */
@media only screen and (min-width: 960px) {
  body {
    font-size: 18px;
  }
}

/* Styles for iPhone-sized devices (<= 480px) */
@media only screen and (max-device-width: 480px) {
  body {
    font-size: 14px;
  }
}

Pertimbangan Tambahan

• Skrin iPad biasanya lebih besar daripada iPhone, jadi anda mungkin memerlukan peraturan @media yang berasingan untuknya.
• Anda boleh menggunakan sifat @media print{} untuk menentukan gaya untuk versi cetak anda kandungan.
• Sentiasa uji gaya anda dengan teliti merentas pelbagai peranti dan penyemak imbas untuk memastikan ia dipaparkan dengan betul.

Atas ialah kandungan terperinci Mengapa Pertanyaan Media Saya Tidak Berfungsi pada Penyemak Imbas, Tetapi Berfungsi pada Peranti Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!