Bagaimanakah saya menyasarkan pelayar iPhone dan Android dengan pertanyaan @media CSS?

Sokongan pegang tangan CSS @media pada Penyemak Imbas iPhone dan Android

Dalam usaha untuk menyesuaikan halaman web untuk penyemak imbas mudah alih, pembangun boleh cuba menggunakan CSS @media pertanyaan pegang tangan untuk mengubah penampilan halaman. Walau bagaimanapun, sesetengah platform, seperti iPhone melalui Safari, mengabaikan pendekatan ini.

Pendekatan Alternatif untuk iPhone dan Android

Untuk menangani had ini, penyelesaian yang disyorkan adalah dengan menggunakan pertanyaan media yang menentukan ciri peranti tertentu. Kod berikut menunjukkan penyasaran iPhone (atau mana-mana peranti dengan lebar skrin 480px atau kurang):

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

Menyasarkan Peranti dengan Resolusi Lebih Tinggi

Seperti yang dinyatakan, peranti seperti Droid X mempunyai resolusi yang lebih tinggi yang mungkin tidak dapat dikesan oleh pertanyaan yang disebutkan di atas. Untuk menyasarkan peranti sedemikian, pertanyaan media boleh memeriksa ciri fizikal peranti, seperti peleraian:

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

Sumber Tambahan

Cerapan lanjut boleh didapati dalam A yang disediakan Senaraikan artikel Apart dan Pengesyoran W3 untuk pertanyaan media.

Atas ialah kandungan terperinci Bagaimanakah saya menyasarkan pelayar iPhone dan Android dengan pertanyaan @media CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!