Berhenti Menggunakan Meta Tag Viewport (Jika Tidak Tahu Fungsinya)

Berhenti Menggunakan Meta Tag Viewport (Jika Tidak Tahu Fungsinya)

Pada tahun-tahun awal, ketika smartphone datang ke Bumi, mereka tahu bahwa Internet tidak disiapkan untuk mereka, jadi mereka mengharapkan setiap situs web memiliki lebar sekitar 1000px (980px di iPhone) dan memperkecil situs web agar sesuai dengan layar. Jadi, <meta name = "viewport"> dibuat, pada dasarnya untuk memberi tahu orang-orang pintar itu bahwa situs web Anda telah disiapkan untuk mereka.
Saat ini, beberapa kerangka kerja front-end populer seperti HTML5 Boilerplate, Twitter Bootstrap dan templat siap pakai lainnya menyertakan tag meta ini secara default –yang bagus untuk desain web responsif, tetapi sangat berbahaya untuk desain web "tradisional". Begini Cara kerjanya.

Secara singkat


Jika Anda tidak membuat kode situs responsif, jangan gunakan area pandang meta. Jika Anda membuat kode situs web yang responsif, yang Anda butuhkan hanyalah menulis.


  <meta name="viewport" content="width=device-width, initial-scale=1">

Parameter tambahan apa pun di atribut konten biasanya mengacaukan pengalaman pengguna.
Note: Seperti yang ditunjukkan dengan benar oleh Para Senior, Anda juga harus menggunakan meta viewport jika Anda membuat situs seluler khusus, jadi bukan hanya untuk situs responsif.

Device Width


Bagian terpenting dari tag viewport memberi tahu browser berapa lebar situs web Anda. Jika kita mengkodekannya seperti ini:

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

kami akan memberi tahu browser "situs web saya menyesuaikan dengan lebar Anda". Jika kita menggunakan parameter ini pada situs non-responsif, situs web akan memperbesar ke sudut kiri atas, memaksa pengguna untuk memperkecil (hanya untuk memahami di mana mereka berada) dan memperbesar untuk melihat detailnya. Bukan pengalaman pengguna terbaik, bukan?

Initial Scale


Karena browser cenderung menskalakan situs web, parameter ini menyetel tingkat zoom awal, yang biasanya berarti 1 piksel CSS sama dengan 1 piksel viewport (yang tidak selalu sama dengan 1 piksel fisik). Situs yang responsif seharusnya berfungsi tanpa parameter ini, tetapi mungkin membantu memperbaiki beberapa masalah dengan browser tertentu saat mengubah mode orientasi, atau mencegah zoom default.

Maximum Scale


Mengatur skala maksimum berarti mengatur zoom maksimum. Di situs web di mana akses ke informasi adalah prioritas utama (sebagian besar, jika tidak semua, situs web), menyetel skala-maksimum = 1 tidak akan memungkinkan pengguna untuk memperbesar. Ini mungkin tampak tidak penting jika Anda memiliki situs web yang responsif, tetapi ada banyak kasus ketika pengguna mungkin perlu memperbesar: font tubuh kecil (setidaknya, untuk kebutuhan pengguna), memeriksa beberapa detail dalam foto, dll. Jangan memicu masalah aksesibilitas hanya untuk alasan estetika.

Skalabel pengguna = tidak


Parameter ini menghilangkan kemampuan untuk memperbesar atau memperkecil, dan bahkan lebih buruk dari skala maksimum. Jika ada alasan yang sangat khusus untuk menggunakannya (mis., Anda membuat kode aplikasi web dan perlu menghindari memperbesar input formulir), coba tambahkan dan hapus dengan JavaScript, hanya untuk tindakan yang ingin Anda perbaiki. Bagaimanapun, ingatlah bahwa pengguna ponsel cerdas terbiasa memperbesar dan memperkecil situs web apa pun, jadi harus memperkecil setelah mengisi formulir mungkin merupakan perilaku default dan Anda mungkin tidak perlu memperbaikinya.

Combo Breaker


Sekarang bayangkan pemecah kombo: situs web tidak responsif (tata letak tetap, lebar sekitar 960 piksel) dengan tag viewport seperti.


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

Selamat, situs web Anda diperbesar ke 300px atau 400px pertama dari sudut kiri atas, pengguna tidak dapat memperkecil dan satu-satunya cara untuk mengakses informasi adalah dengan dengan sabar melihat situs web dalam ukuran 300px. Seluruh pengalaman dikacaukan oleh tag tambahan.

Hanya saja, jangan gunakan tag viewport dengan sembarangan


Banyak situs web non-responsif menggunakan tag viewport tanpa menyadari betapa berbahayanya hal itu bagi pengguna, atau mereka menggunakan beberapa parameter viewport "hanya karena seseorang menyalin dan menempelkannya di sana". Sayangnya, ini bukan kasus yang terisolasi; sebagai perancang dan pengembang web, kami cenderung terlalu mengandalkan kerangka kerja dan templat, terkadang menambahkan banyak kode tambahan yang tidak akan digunakan situs web secara gratis, dan terkadang menambahkan baris konfigurasi kompleks yang tidak terlalu dibutuhkan proyek. Saatnya memulihkan kendali atas situs web kita: jangan pernah menambahkan sebaris kode yang tidak terlalu Anda pahami, jangan pernah menambahkan sebaris kode yang sebenarnya tidak Anda butuhkan.

Berkomentar Lah Dengan Sopan, Bijak Dan BerEtika, Karena Setiap Komentar Menjadi Tanggung Jawab Komentator

Post a Comment (0)
Previous Post Next Post