Meta Tag Responsif - Trik CSS

Anonim

Saya cenderung menggunakan ini:

Walaupun saya melihat ini sangat disyorkan:

Ini bermaksud bahawa penyemak imbas akan (mungkin) memberikan lebar halaman pada lebar skrinnya sendiri. Oleh itu, jika skrin itu berukuran 320 piksel, tetingkap penyemak imbas akan selebar 320 piksel, dan bukannya cara mengezum keluar dan menunjukkan 960 piksel (atau apa sahaja yang dilakukan oleh peranti itu secara lalai, sebagai ganti tag meta responsif).

Catatan: jangan gunakan tag meta responsif jika laman web anda tidak dirancang khusus untuk responsif dan berfungsi dengan baik pada ukuran tersebut, kerana akan menjadikan pengalaman lebih buruk.

Terdapat lebih banyak atribut yang disokong oleh tag ini:

Harta tanah Penerangan
lebar Lebar ruang pandang maya peranti.
lebar peranti Lebar fizikal skrin peranti.
ketinggian Ketinggian "viewport maya" peranti.
ketinggian peranti Ketinggian fizikal skrin peranti.
skala awal Zum awal semasa melawat halaman. 1.0 tidak mengezum.
skala minimum Jumlah minimum yang dapat dilihat oleh pengunjung di halaman. 1.0 tidak mengezum.
skala maksimum Jumlah maksimum yang dapat dilihat oleh pengunjung di halaman. 1.0 tidak mengezum.
skala pengguna Membolehkan peranti mengezum masuk dan keluar. Nilai adalah ya atau tidak.

Umumnya disarankan agar anda tidak mencegah penskalaan, kerana itu menjengkelkan dan berpotensi menjadi masalah aksesibilitas.

Anda mungkin juga menginginkannya di CSS anda:

@-ms-viewport( width: device-width; )

Perlu diketahui: mengubah nilai tag meta ini dengan JavaScript tidak berfungsi, halaman akan bertindak balas terhadap nilai baru. Entah keseluruhan tag dan ganti, atau ubah contentharta benda. Bukan keperluan yang sangat biasa, tetapi ia boleh muncul.