Mengkonfigurasi dan Mengatur Viewport

viewport meta tag

viewport meta tag

Viewport sendiri berfungsi menyesuaikan diri terhadap keadaan browser, jika dibuka oleh browser maka tampilannya akan mengikuti browser. Contoh kita memakai chrome maka terlihat ukuran besar, namun bila dibuka pada chrome mobile otomatis akan mengikuti tampilan mobile sangat membantu, karena ramah terhadap pengguna handphone atau mobile friendly. Viewport juga berlaku saat Pagespeed Insight menemukan halaman tidak menentukan sebuah viewport, atau menentukan viewport tidak teradaptasi dengan device yang berbeda. Kontrol dari viewport adalah bagaimana halaman web menampilkan perangkat mobile. Tanpa sebuah viewport, device akan menjadikan halaman khas desktop yang disesuaikan ukuran layar. Pengaturan viewport memberikan kontrol lebih pada lebar halaman dan skala berbeda tiap perangkatnya.

Saran Viewport

Pengoptimalan halaman untuk menampilkan perangkat mobile yang harus menyediakan meta viewport tag didalam tag head dari sebuah dokumen agar menentukan width=device-width, initial-scale=1

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

Informasi Tambahan

Syarat:

  • Piksel Hardware: Sebuah piksel fisik yang tertampil pada layar. Untuk Contoh kita mengambil sebuah layar Iphone 5 dengan ukuran 640 horizontal hardware piksel.
  • Perangkat Independen piksel: Sebuah skala dari perangkat untuk mencocokkan sumber yang sama pada jarak penglihatan normal, yang harus dengan ukuran sama pada semua perangkat, Seperti Iphone 5 berukuran lebar 320 dip.
  • CSS piksel: Sebuah unit digunakan untuk tata letak halaman yang dikendalikan oleh viewport, disinilah kita ketahui salah satu fungsinya. Dimensi piksel didalam style dengan lebar:

Halaman Desktop Pada Perangkat Selular

Ketika halaman tidak ditentukan viewport, browser seluler akan memberikan halaman tersebut dengan jarak ukuran dari 800 hingga 1024 piksel pada CSS. Skala halaman memiliki faktor untuk disesuaikan sehingga cocok di layar dan memaksa pengguna untuk tampilannya sebelum mereka bisa berinteraksi dengan halaman.

Tag Meta Viewport

Sebuah meta viewport memberikan instruksi kepada browser dengan mengontrol dimensi halaman – halaman dan harus disertakan dalam tag <head>.

Kode tag Viewport Fixed-width

Viewport bisa diatur menentukan lebar seperti width=320 atau width=1024. Sementara keinginan bisa menjadi pengganti yang sangat berguna memastikan halaman dimensi dapat tampil seperti yang diharapkan.

Tampilan Rensponsif Viewport

Menggunakan nilai meta width=device-width memerintahkan halaman yang cocok pada lebar layar dalam perangkat independent piksel. Hal ini memungkinkan halaman memflow konten agar cocok dengan ukuran layar yang berbeda. Beberapa browser termasuk iOS dan Windows phone akan mengatur  lebar halaman yang terus menerus ketika memutar ke mode landscape dan tampilannya dari pada reflow untuk mengisi layar. Menambah beberapa atribut initial-scale=1 menginstruksikan browser agar stabil dengan skala 1:1 antara hubungan piksel dan perangkat independent piksel yang terlepas pada pedoman perangkat dan mengizinkan halaman mengambil keuntungan dari ukuran Landscape penuh.

Pertimbangan Lainnya

Hindari minimum-scale, maximum-scale dan user-scalable. Hal ini memungkinkan untuk mengatur minimal dan maksimal zoom atau mematikan fungsi pengguna agar memperbesar viewport seluruhnya. Pilihan ini berdampak negatif terhadap hal yang mudah dicapai dan umumnya harus dihindari.

@Viewport

Tag meta viewport sementara mendukung secara luas bukan dari bagian format standart. Perilaku ini didalam bagian CSS mengadopsi perangkat memenuhi spesifikasi. Hingga akhir spesifikasi diterapkan dan terselesaikan, author harus melanjutkan untuk menggunakan tag meta viewport agar kompetibel, baik sendiri ataupun sesuai dengan style @viewport.

(13)

Coba Baca Beberapa Berita Terkait

Kartun Muslimah Cantik Warna Ungu Kartun Muslimah Cantik Anggun Desainavirss - Kartun Muslimah Cantik - Halo kawan dan pembaca sekalian telah menunggu update terbaru dari foto k...
Model Baju Atasan dan Busana Wanita Terbaru Model Baju Atasan dan Busana Wanita Terbaru Desainavirss - Model baju atasan -  Era fashion semakin berkembangan dengan model baju atasan baru me...
Langkah langkah Konfigurasi Debian 6 Saat penginstallan dan Konfigurasi debian Konfigurasi debian lengkap Name server addresses :  192.168.14.1 Hostname : irfansyah Domain name : irfa...
Sistem Pembayaran Pada Neobux Dengan Netelller   Sistem Pembayaran Neobux Sistem Pembayaran - Desainavirss - Apa itu neobux? Neobux merupakan situs yang menyediakan jasa dalam bidang perikla...
Spesifikasi Laptop lenovo z61t Thinkpad Inilah Perincian Laptop lenovo Z61t yang Wajib diketahui Desainavirss - Lenovo Z61t - Ada banyak laptop dengan variasi berbeda beda. Menawarkan k...
Cara Membuat Nilai rata-rata dengan c plus plus Se... Membuat Nilai Rata-Rata Dengan c++ Desainavirss - Nilai rata-rata dengan c plus plus Bahasa pemrograman sekarang ada banyak serta memiliki keungg...
Daftar Situs Pembuat Uang Online Dengan Micro Jobs Situs Pembuat Uang Online Dengan Mikro Jobs Desainavirss - Pembuat Uang Online - Freelancing menjadi prioritas pertama dari generasi muda. Kita s...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.