Blog ini akan menerangkan cara menggunakan teg meta port pandang untuk reka bentuk web responsif dalam HTML:
Apakah itu Teg Meta Viewport?
' tempat pandang ” ialah teg paling penting untuk mencipta reka bentuk responsif dengan mengawal cara kandungan dipaparkan pada saiz skrin yang berbeza. Tag ini diletakkan di dalam '
Atribut Berbeza Teg Meta Viewport
Teg meta viewport mempunyai atribut berikut yang boleh diletakkan sebagai nilai untuk ' kandungan ” atribut:
atribut 'lebar'.
' lebar ” atribut menentukan kawasan kelihatan halaman web untuk kandungan secara menegak. Tag metanya kelihatan seperti ini:
< meta nama = 'port view' kandungan = 'lebar=lebar peranti' >
atribut 'ketinggian'.
' ketinggian ” atribut menetapkan panjang menegak halaman web untuk memastikan ketinggian port pandangan sepadan dengan ketinggian skrin. Tag metanya kelihatan seperti ini:
< meta nama = 'port view' kandungan = 'tinggi=400' >
Atribut 'skala awal'.
' Skala awal ” atribut memastikan bahawa halaman web dipaparkan pada tahap zum yang sesuai apabila mula-mula dimuatkan. Sebagai contoh, lawati kod di bawah:
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala awal=1.0' >atribut 'skala maksimum'.
' skala maksimum ” atribut menentukan tahap zum maksimum untuk halaman web untuk mengelakkan isu reka letak:
< meta nama = 'port view' kandungan = 'lebar=lebar-peranti, skala maksimum=1.0' >
atribut 'skala minimum'.
' skala minimum ” digunakan untuk menyekat pengguna daripada mengezum keluar terlalu banyak dengan menentukan tahap skala zum keluar minimum:
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala minimum=0.5' >atribut 'boleh skala pengguna'.
' berskala pengguna atribut ” membenarkan atau tidak membenarkan pengguna membuat skrin halaman web zum keluar atau zum masuk dengan menetapkan nilai kepada “ Tidak ” atau “ ya ”. Teg meta yang membolehkan pengguna mengezum masuk atau keluar ialah:
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, boleh skala pengguna=ya' >Bagaimana Menggunakan Tag Meta Viewport untuk Reka Bentuk Web Responsif dalam HTML?
Untuk lebih memahami penggunaan teg meta port pandang untuk reka bentuk web responsif. Mari kita lihat contoh:
Katakan di dalam ' Selepas penyusunan coretan kod di atas, halaman web kelihatan seperti ini: Output memaparkan bahawa kandungan tidak responsif kerana ia tidak dipaparkan dengan sempurna pada peranti kecil. Sekarang untuk menjadikannya responsif tambahkan ' tempat pandang ” tag meta: Selepas mengemas kini kod, halaman web kelihatan seperti ini pada saiz skrin yang berbeza: Output akhir menggambarkan bahawa halaman web kini responsif selepas penambahan tag meta di dalam ' Teg meta port pandang membolehkan pembangun menyediakan satu set arahan kepada penyemak imbas yang menetapkan cara halaman web dipaparkan pada peranti saiz skrin yang berbeza. Tag meta diletakkan di dalam ' ” tag: < div >
< hlm >
< b > Dikuasakan oleh Linuxhint, untuk lebih memahami teg meta viewport, buka halaman web pada Skrin yang berbeza saiz peranti.< / b >
< / hlm >
< img src = '../bg.jpg' segala-galanya = 'Penggodam' lebar = '460' ketinggian = '3. 4. 5' >
< hlm gaya = 'padding:5px' >
< i >Sertai Pasukan Linuxhint < / i >
Dikuasakan oleh Linuxhint, untuk lebih memahami teg meta viewport, buka halaman web pada Skrin yang berbeza saiz peranti. Dikuasakan oleh Linuxhint, untuk lebih memahami teg meta port pandang buka halaman web pada Skrin yang berbeza saiz peranti. Dikuasakan oleh Linuxhint, untuk lebih memahami teg meta port pandang buka halaman web pada Skrin yang berbeza saiz peranti. Dikuasakan oleh Linuxhint, untuk lebih memahami teg meta port pandang buka halaman web pada Skrin yang berbeza saiz peranti.
< / hlm >
< / div >
< meta nama = 'port view' kandungan = 'lebar=lebar peranti, skala awal=1.0' / >
< / kepala >
Kesimpulan