Meta Tag Responsif - Trik CSS

Anonim

Saya cenderung menggunakan ini:

Meskipun saya melihat ini sangat direkomendasikan:

Ini berarti browser (mungkin) akan merender lebar halaman dengan lebar layarnya sendiri. Jadi, jika layar itu lebarnya 320px, jendela browser akan menjadi 320px, bukan diperbesar dan menampilkan 960px (atau apa pun yang dilakukan perangkat itu secara default, sebagai pengganti tag meta responsif).

Catatan: jangan gunakan tag meta responsif jika situs Anda tidak dirancang khusus untuk menjadi responsif dan berfungsi dengan baik pada ukuran tersebut, karena akan memperburuk pengalaman.

Ada lebih banyak atribut yang didukung tag ini:

Properti Deskripsi
lebar Lebar area pandang virtual perangkat.
lebar perangkat Lebar fisik layar perangkat.
tinggi Ketinggian "area pandang virtual" perangkat.
tinggi perangkat Ketinggian fisik layar perangkat.
skala awal Zoom awal saat mengunjungi halaman. 1.0 tidak memperbesar.
skala minimum Jumlah minimum pengunjung dapat memperbesar halaman. 1.0 tidak memperbesar.
skala maksimum Jumlah maksimum yang dapat diperbesar pengunjung pada halaman. 1.0 tidak memperbesar.
berskala pengguna Memungkinkan perangkat untuk memperbesar dan memperkecil. Nilainya ya atau tidak.

Umumnya disarankan agar Anda tidak mencegah penskalaan, karena hal itu mengganggu dan berpotensi menimbulkan masalah aksesibilitas.

Anda mungkin menginginkan ini di CSS Anda juga:

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

Sebaiknya Anda tahu: mengubah nilai tag meta ini dengan JavaScript berhasil, halaman akan bereaksi terhadap nilai baru. Keluarkan seluruh tag dan ganti, atau ubah contentproperti. Bukan kebutuhan yang super umum, tapi bisa muncul.