Blog ini akan menjelaskan cara menggunakan tag meta viewport untuk desain web responsif dalam HTML:
Apa itu Tag Meta Area Pandang?
“ area pandang ” adalah tag paling penting untuk membuat desain yang responsif dengan mengontrol bagaimana konten muncul di berbagai ukuran layar. Tag ini ditempatkan di dalam “
Atribut berbeda dari Meta Tag Viewport
Meta tag viewport memiliki atribut berikut yang dapat ditempatkan sebagai nilai untuk “ isi ” atribut:
atribut 'lebar'.
“ lebar Atribut ” menentukan area yang terlihat dari halaman web untuk konten secara vertikal. Tag meta-nya terlihat seperti ini:
< meta nama = 'area pandang' isi = 'lebar=lebar-perangkat' >
atribut 'tinggi'.
“ tinggi Atribut ” menyetel panjang vertikal laman web untuk memastikan bahwa tinggi viewport cocok dengan tinggi layar. Tag meta-nya terlihat seperti ini:
< meta nama = 'area pandang' isi = 'tinggi = 400' >
Atribut 'skala awal'.
“ Skala awal ” atribut memastikan bahwa halaman web ditampilkan pada tingkat zoom yang sesuai saat pertama kali dimuat. Misalnya, kunjungi kode di bawah ini:
< meta nama = 'area pandang' isi = 'width=device-width, initial-scale=1.0' >atribut 'skala maksimum'.
“ skala maksimum ” atribut menentukan tingkat zoom maksimal untuk halaman web untuk mencegah masalah tata letak:
< meta nama = 'area pandang' isi = 'width=device-width, maximum-scale=1.0' >
atribut 'skala minimum'.
“ skala minimum ” digunakan untuk membatasi pengguna dari melakukan zoom out terlalu banyak dengan menentukan tingkat skala zoom-out minimum:
< meta nama = 'area pandang' isi = 'width=device-width, minimum-scale=0.5' >atribut 'dapat diskalakan pengguna'.
“ skalabel pengguna Atribut ” membolehkan atau tidak mengizinkan pengguna membuat layar laman web memperkecil atau memperbesar dengan menyetel nilai ke “ TIDAK ' atau ' Ya ”. Tag meta yang memungkinkan pengguna untuk memperbesar atau memperkecil adalah:
< meta nama = 'area pandang' isi = 'width=device-width, user-scalable=yes' >Bagaimana Cara Menggunakan Tag Meta Area Pandang untuk Desain Web Responsif dalam HTML?
Untuk lebih memahami penggunaan meta tag viewport untuk desain web yang responsif. Mari kita telusuri sebuah contoh:
Misalkan di dalam ' Setelah kompilasi potongan kode di atas, halaman web terlihat seperti ini: Keluaran menampilkan bahwa konten tidak responsif karena tidak ditampilkan dengan sempurna di perangkat kecil. Sekarang untuk membuatnya responsif, tambahkan ' area pandang ” tag meta: Setelah memperbarui kode, halaman web terlihat seperti ini pada ukuran layar yang berbeda: Hasil akhir mengilustrasikan bahwa halaman web sekarang responsif setelah penambahan tag meta di dalam “ Meta tag viewport memungkinkan pengembang untuk memberikan satu set instruksi ke browser yang mengatur bagaimana halaman web ditampilkan pada perangkat ukuran layar yang berbeda. Tag meta ditempatkan di dalam “ ” tag: < div >
< P >
< B > Didukung oleh Linuxhint, untuk lebih memahami meta tag viewport buka halaman web di Layar yang berbeda ukuran perangkat.< / B >
< / P >
< img src = '../bg.jpg' semuanya = 'Peretas' lebar = '460' tinggi = '3.4.5' >
< P gaya = 'padding:5px' >
< Saya >Bergabung dengan Tim Linuxint < / Saya >
Didukung oleh Linuxhint, untuk lebih memahami tag meta viewport buka halaman web di Layar berbeda ukuran devices.Diberdayakan oleh Linuxhint, untuk lebih memahami meta tag viewport buka halaman web di Layar yang berbeda ukuran devices.Diberdayakan oleh Linuxhint, untuk lebih memahami meta tag viewport buka halaman web di Layar yang berbeda ukuran devices.Diberdayakan oleh Linuxhint, untuk lebih memahami meta tag viewport buka halaman web di Layar yang berbeda ukuran perangkat.
< / P >
< / div >
< meta nama = 'area pandang' isi = 'width=device-width, initial-scale=1.0' / >
< / kepala >
Kesimpulan