Sebaiknya saya menonaktifkan user-scalable untuk mencegah zoom "tidak sengaja"?

Umumnya tidak — memblokir pinch-to-zoom mencegah pengunjung dengan penglihatan rendah memperbesar untuk membaca konten Anda, yang ditandai oleh pedoman aksesibilitas (WCAG 1.4.4). Perbaiki masalah tata letaknya, bukan menonaktifkan zoom.

Apa fungsi sebenarnya viewport-fit=cover?

Pada perangkat dengan notch atau sudut membulat, ini memungkinkan latar belakang halaman Anda meluas hingga ke area safe-area tersebut, alih-alih menyisakan bilah hitam, sementara Anda menggunakan fungsi CSS env(safe-area-inset-*) untuk menjaga konten agar tetap bebas dari notch.

Apakah width=device-width selalu benar?

Untuk sebagian besar situs responsif, ya — ini membuat viewport CSS sesuai dengan lebar alami perangkat sehingga breakpoint responsif Anda berperilaku dapat diprediksi.

Kategori: Alat pengembang

Generator Viewport Meta

Ide kami sendiriAlatnya tidak ada?

Buat viewport meta tag responsif dan pahami setiap opsinya

Atur width, initial scale, batas zoom, izin pinch-zoom, dan viewport-fit untuk viewport meta tag halaman Anda, dengan penjelasan singkat tiap opsinya, lalu salin tag jadinya ke <head> Anda. Dibuat sepenuhnya di browser Anda.

LebarBiasanya "device-width" agar tata letak sesuai dengan lebar piksel CSS layar.Skala awalTingkat zoom saat pertama kali dimuat; 1 berarti tanpa zoom.Skala minimumSkala maksimumBiarkan kosong agar pengunjung bebas melakukan zoom di antara batas berapa pun.Viewport fit"cover" memungkinkan konten meluas hingga ke area notch/safe-area pada perangkat yang mendukungnya.

Izinkan pinch zoom (user-scalable)

Menonaktifkan ini memblokir pinch-to-zoom, yang merugikan aksesibilitas — sebagian besar situs sebaiknya membiarkannya aktif.

Meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Viewport meta tag memberi tahu browser mobile cara mengukur dan menskalakan sebuah halaman — tanpa tag ini, ponsel merender halaman pada lebar tetap ala desktop lalu memperkecilnya, itulah sebabnya tag ini menjadi salah satu hal pertama yang diperiksa oleh alat pengecekan mobile-friendliness. Menetapkan width=device-width dan initial-scale=1 sudah mencakup kasus umum, tetapi opsi batas skala dan viewport-fit layak dipahami, bukan sekadar disalin-tempel begitu saja, karena menonaktifkan zoom sepenuhnya adalah masalah aksesibilitas bagi pengguna dengan penglihatan rendah.

Cara memakainya

Biarkan width sebagai "device-width" kecuali Anda punya alasan khusus untuk mengubahnya.
Atur initial scale, dan opsional batas zoom minimum/maksimum.
Tentukan apakah mengizinkan pinch-to-zoom — disarankan untuk membiarkannya aktif.
Pilih nilai viewport-fit jika desain Anda perlu menjangkau area notch atau safe-area.
Salin tag yang dihasilkan ke <head> halaman Anda.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Sebaiknya saya menonaktifkan user-scalable untuk mencegah zoom "tidak sengaja"?: Umumnya tidak — memblokir pinch-to-zoom mencegah pengunjung dengan penglihatan rendah memperbesar untuk membaca konten Anda, yang ditandai oleh pedoman aksesibilitas (WCAG 1.4.4). Perbaiki masalah tata letaknya, bukan menonaktifkan zoom.
Apa fungsi sebenarnya viewport-fit=cover?: Pada perangkat dengan notch atau sudut membulat, ini memungkinkan latar belakang halaman Anda meluas hingga ke area safe-area tersebut, alih-alih menyisakan bilah hitam, sementara Anda menggunakan fungsi CSS env(safe-area-inset-*) untuk menjaga konten agar tetap bebas dari notch.
Apakah width=device-width selalu benar?: Untuk sebagian besar situs responsif, ya — ini membuat viewport CSS sesuai dengan lebar alami perangkat sehingga breakpoint responsif Anda berperilaku dapat diprediksi.