Konfigurasikan Area Pandang

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa laman Anda tidak menentukan area pandang, atau menentukan area pandang yang tidak beradaptasi dengan perangkat yang berlainan.

Ikhtisar

Area pandang mengontrol cara laman web ditampilkan di perangkat seluler. Tanpa area pandang, perangkat seluler akan merender laman dengan lebar layar desktop biasa, yang diskalakan agar pas dengan layarnya. Menyetel area pandang memberikan kontrol atas lebar laman dan penskalaan pada berbagai perangkat.

Kiri: Laman tanpa area pandang meta.
Kanan: Laman dengan area pandang yang disesuaikan dengan lebar perangkat.

Saran

Laman yang dioptimalkan agar ditampilkan dengan baik di perangkat seluler seharusnya menyertakan area pandang meta di bagian kepala dokumen yang menentukan width=device-width, initial-scale=1.

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

Informasi tambahan

Istilah:

  • Piksel perangkat keras: Piksel fisik pada layar. Misalnya, iPhone 5 memiliki layar dengan 640 piksel perangkat keras horizontal.
  • Piksel yang tidak tergantung perangkat (Device-independent pixel/dip): Penskalaan piksel perangkat agar sesuai dengan piksel referensi yang seragam pada jarak tampilan normal, yang seharusnya berukuran kurang lebih sama di semua perangkat. iPhone 5 memiliki lebar 320 dip.
  • Piksel CSS: Unit yang digunakan untuk tata letak laman yang dikontrol oleh area pandang. Dimensi piksel dalam gaya seperti width: 100 px ditentukan dalam piksel CSS. Rasio piksel CSS untuk piksel yang tidak tergantung perangkat adalah faktor skala laman, atau pembesaran/pengecilan.

Laman Desktop di Perangkat Seluler

Saat laman tidak menentukan area pandang, browser seluler akan merender laman tersebut pada lebar alternatif berkisar mulai dari 800 hingga 1024 piksel CSS. Faktor skala laman disesuaikan sehingga laman tersebut pas dengan layar, sehingga memaksa pengguna untuk memperbesar/memperkecil sebelum mereka dapat berinteraksi dengan laman.

Tag Area Pandang Meta

Tag area pandang meta memberi petunjuk kepada browser mengenai cara mengontrol dimensi laman dan penskalaan, dan seharusnya disertakan di bagian kepala dokumen.

Area Pandang Lebar Tetap

Area pandang dapat disetel ke lebar tertentu, seperti width=320 atau width=1024. Meskipun tidak dianjurkan, hal ini dapat menjadi pengganti sementara yang berguna untuk memastikan agar laman dengan dimensi tetap tampil seperti yang diharapkan.

Area Pandang Responsif

Penggunaan nilai area pandang meta width=device-width menginstruksikan laman agar sesuai dengan lebar layar dalam piksel yang tidak tergantung perangkat. Hal ini memungkinkan laman untuk mengatur ulang konten agar sesuai dengan berbagai ukuran layar.

Beberapa browser, termasuk iOS dan Windows Phone, akan mempertahankan lebar laman agar konstan saat berputar ke mode lanskap, dan memperbesar/memperkecil alih-alih mengatur ulang untuk memenuhi layar. Penambahan atribut initial-scale=1 menginstruksikan browser untuk membangun hubungan 1:1 antara piksel CSS dan piksel independen perangkat terlepas dari orientasi perangkat, dan memungkinkan laman mengambil keuntungan dari lebar lanskap penuh.

vs
Kiri: iPhone 5 berputar dengan width=device-width, menghasilkan lebar lanskap 320 piksel.
Kanan: iPhone 5 berputar dengan width=device-width, initial-scale=1, menghasilkan lebar lanskap 568 piksel.

Laman harus dirancang agar bekerja dengan lebar berlainan untuk menggunakan area pandang responsif. Lihat saran kami mengenai mengatur ukuran konten sesuai dengan area pandang untuk mendapatkan masukan.

Pertimbangan Lainnya

Hindari minimum-scale, maximum-scale, user-scalable

Anda dapat menyetel pembesaran/pengecilan maksimum dan minimum, atau sama sekali menonaktifkan kemampuan pengguna untuk memperbesar/memperkecil area pandang. Opsi ini memiliki dampak negatif terhadap aksesibilitas dan umumnya harus dihindari.

@viewport

Tag area pandang meta, meskipun didukung luas, bukan merupakan bagian dari standar formal. Perilaku ini disertakan dalam CSS sebagai bagian spesifikasi Adaptasi Perangkat CSS. Sebelum spesifikasi ini selesai dan diterapkan secara luas, penulis seharusnya terus menggunakan tag area pandang meta untuk kompatibilitas, baik sendiri ataupun dengan gaya @viewport yang sesuai.

Sumber Daya: