Apa itu Area Pandang Virtual?

Di Chrome M40, ada perubahan pada area tampilan yang tidak terlalu terlihat, tetapi akan memberikan perbedaan besar bagi pengguna.

Ketika browser seluler dimulai, kurangnya tag meta area pandang berarti halaman web akan menganggapnya memiliki ruang layar sekitar 980 piksel dan dirender dengan ukuran ini. Dengan tag meta area pandang, developer dapat menentukan lebar, yang paling umum adalah "lebar perangkat", yang menyetel ukuran layar ke ukuran perangkat. Anda dapat mempelajari lebih lanjut tentang Dasar-Dasar Web.

Cara Rick Byers mendeskripsikan area pandang virtual adalah sebagai berikut: gagasan tentang area pandang virtual adalah membagi konsep "area area" menjadi dua, "area pandang tata letak" (tempat item dengan posisi tetap terpasang) dan "area pandang visual" (Apa yang sebenarnya dilihat oleh pengguna).

Contoh Super Sederhana

Videojs.com situs adalah contoh yang bagus karena appbar-nya tetap di atas dan memiliki link di sisi kiri dan kanan appbar.

Gambar di bawah menunjukkan apa yang akan Anda lihat jika Anda memperbesar situs dan mencoba menggeser ke kiri dan kanan.

Perangkat teratas adalah Chrome M39, yang tidak memiliki area pandang virtual dan 3 perangkat terbawah berasal dari Chrome M40, yang memiliki area pandang virtual.

Rendering piksel.
Rendering piksel.

Di Chrome M39, Anda akan melihat panel aplikasi setelah memperbesar, tetapi men-scroll ke kanan tidak memungkinkan Anda melihat link di sisi kanan panel, dan Anda hanya akan melihat logo.

Bandingkan ini dengan Chrome M40 (yang memiliki "area pandang virtual") dan Anda akan melihat bahwa "area pandang visual" men-scroll semua yang ada di dalam "area pandang tata letak", sehingga Anda dapat melihat link di sebelah kanan.

Internet Explorer sudah memiliki perilaku ini dan perubahan ini membuat kita lebih selaras dengan perubahan tersebut.

html

Satu-satunya perubahan besar yang dihadapi developer yang menyertai hal ini adalah di M39, Anda dapat menerapkan overflow: hidden ke elemen html dan halaman akan tetap dapat di-scroll, di M40, hal ini tidak lagi didukung, halaman tidak akan di-scroll.

Info Lebih Lengkap

Kamu ingin belajar lebih lanjut, kan?

Setelah itu, Anda dapat melihat dek {i>slide<i} di bawah ini.