Elemen Kunci untuk Situs Web Responsif

Apa hal pertama yang Anda pikirkan ketika seseorang mengatakan situs web responsif? Apa yang terlintas di benak Anda saat memikirkan bagian terpenting dari kode yang terkait dengan situs web responsif? CSS? unit relatif (%)? Pertanyaan media? Yah, kita tidak akan membicarakannya di sini. Posting ini bertujuan untuk menunjukkan hal-hal paling penting yang tanpanya tidak ada teknik responsif Anda yang akan bekerja seperti yang Anda harapkan. Kita berbicara tentang tag html. Nah, tapi Anda tahu meta tag tidak ada hubungannya dengan apa yang sedang dirender, bukan? Mereka hanya membawa informasi mengenai konten halaman. Mereka bahkan tidak muncul di halaman itu sendiri. Bagaimana pengaruhnya dalam membuat halaman web kita responsif?

Ada tag meta khusus yang disebut meta viewport, yang sebenarnya banyak berkaitan dengan seberapa baik halaman Anda beradaptasi dengan layar yang dirender. Mari kita menggali lebih dalam.

 <head> <title> Meta Viewport Example </title> <meta name= "viewport" content= "width=80, initial-scale=1.0" > </head>

Lihat cuplikan kode yang menunjukkan tag meta yang terlampir di bagian Head. Atribut name mengatakan viewport. Itu seharusnya cukup untuk menunjukkan bahwa tag ini seharusnya menambahkan beberapa jenis informasi yang terkait dengan viewport – ruang di layar tempat halaman web Anda dirender. Jangan bingung antara lebar viewport dengan lebar layar. Mereka mungkin sama ketika perangkat rendering adalah ponsel (kita akan membicarakannya nanti di posting yang sama) tetapi di desktop dan PC, Anda dapat bermain dengan ukuran browser Anda. Perhatikan potongan kode berikut. Tempelkan di konsol browser Anda dan ubah ukuran jendela Anda untuk melihat bagaimana lebar viewport berubah.

 window . addEventListener ( " resize " , () => { console . log ( document . documentElement . clientWidth ); });

Sekarang semoga kita memahami perbedaan antara lebar layar fisik dan lebar viewport, izinkan saya menjelaskan kepada Anda bahwa ponsel umumnya (jika tidak semuanya) tidak memetakan viewport ke dimensi layar (lebar) yang tepat. Anda dapat melihat beberapa contoh nyata di sini . Jadi misalnya jika layar ponsel mengatakan lebar 320px, mungkin mempertimbangkan viewport virtual yang 800px, lebar 900px atau apa pun dan kemudian meminimalkan (memperkecil) output yang diberikan agar sesuai dengan ukuran layar. Mengapa mereka melakukannya, Anda bertanya? Ini berasal dari masa lalu ketika situs web responsif mungkin tidak begitu umum. Bahkan saat ini tidak semua situs web dibuat ramah seluler (yang memang bukan itu yang ingin kami lakukan). Jika vendor browser seluler memetakan lebar viewport browser ke lebar layar, elemen di situs web sebenarnya (gambar besar/tombol besar, dll.) akan rusak saat dirender pada viewport kecil seperti itu. Jadi mereka merendernya di viewport yang lebih besar dan kemudian memperkecil hasilnya untuk menunjukkannya kepada Anda di layar yang lebih kecil. Anda kemudian dapat memperbesar bagian yang Anda inginkan. Anda ingin contoh? Periksa YouTube tetapi lakukan di desktop Anda dan kemudian ubah ukuran jendela Anda untuk memastikan Anda tidak membuka m.youtube.com yang merupakan versi lain yang dimaksudkan khusus untuk ponsel.

Desktop YouTube

YouTube Desktop (tidak dioptimalkan untuk pengalaman seluler)

Namun, ini bukan pengalaman yang ideal untuk situs web yang dibuat ramah seluler. Bisakah Anda menebak masalah apa yang dapat disebabkan oleh viewport virtual ini? Anda menebaknya, bukan? Kueri media akan mulai terputus. Jika Anda menempatkan kueri media yang seharusnya diaktifkan pada 320px, itu tidak akan dipicu karena sebenarnya lebar layar adalah 900px yang baru saja diperbesar untuk menampilkannya kepada Anda di layar ponsel selebar 320px. Apa yang dilakukan vendor peramban seluler untuk pengembang seperti kami yang menulis kueri media agar situs web kami terlihat bagus di semua ukuran layar? Yah, mereka memberi kami tag meta viewport ini yang sekarang dapat kami gunakan di halaman web kami dan memberitahu browser, untuk mengatur lebar viewport virtual sesuai dengan kebutuhan kami. Jadi sekarang ketika Anda mengatakan

html <meta name="viewport" content="width=device-width" />

, browser seluler mengetahui bahwa Anda ingin merender laman Anda dengan area pandang virtual yang selebar layar perangkat. Tentu saja, Anda dapat mengatur nilai "lebar" ini ke piksel acak, tetapi itu tidak membuat kami senang. Anda dapat melihat contoh di w3school .

Menariknya, jika Anda menggunakan alat pembuat boilerplate seperti create-react-app, vue create dll. Anda mungkin atau mungkin tidak repot-repot menelusuri file index.html sepenuhnya. Jika Anda melakukan pemeriksaan silang, Anda pasti akan menemukan tag meta viewport yang disertakan di bagian kepala. Singkirkan sebentar dan lihat bagaimana aplikasi web Anda berperilaku pada ukuran layar yang berbeda. Semoga sekarang, semua orang bisa berhubungan dengan viewport virtual browser mobile.

Area Pandang Virtual

Pelajari lebih lanjut tentang Area Pandang Virtual di sini

Awalnya diposting di sini –

https://mayankav.webflow.io/blog/javascript-symbols-dont-be-scared-of-them

June 21, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *