设计网页响应式 - 视口

Apa itu viewport?

Viewport (viewport) adalah area yang terlihat pengguna di halaman web.

Viewport berbeda-beda untuk setiap perangkat, yang lebih kecil di ponsel daripada di layar komputer.

Sebelum tablet dan ponsel, halaman hanya dirancang untuk digunakan di layar komputer, dan desain statis dengan ukuran tetap sangat umum.

Lalu, ketika kami mulai menggunakan tablet dan ponsel untuk mengakses internet, halaman ukuran tetap terlalu besar untuk menyesuaikan viewport. Untuk memperbaiki masalah ini, peramban di perangkat ini akan mengurangi seluruh halaman proporsional untuk menyesuaikan dengan ukuran layar.

Ini bukan yang sempurna! Hanya perbaikan yang cepat.

atur viewport

HTML5 memperkenalkan metode yang memungkinkan desainer web untuk <meta> Tag untuk mengendalikan viewport.

Anda seharusnya termasuk berikut ini di semua halaman untuk mengendalikan viewport. <meta> Elemen viewport:

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

Ini menyediakan arahan bagi browser tentang bagaimana mengendalikan ukuran halaman dan skala pengembangan.

width=device-width Beberapa mengatur lebar halaman untuk mengikuti lebar layar perangkat (tergantung pada perangkat).

Ketika browser pertama kali memuat halaman,initial-scale=1.0 Beberapa pengaturan tingkat pengembangkatan awal.

Berikut adalah contoh halaman web tanpa tag meta viewport, serta halaman web dengan tag meta viewport:

Petunjuk:Jika Anda melihat halaman ini di ponsel atau tablet, Anda dapat klik tiga link di bawah untuk melihat perbedaan:



Tidak ada tag meta viewport:


Dengan tag meta viewport:

Atur konten untuk ukuran viewport:

Adat pengguna untuk menggeser vertikal di komputer meja dan perangkat bergerak, bukan menggeser horizontal!

Jadi, jika pengguna dipaksa untuk menggeser horizontal atau mengecilkan untuk melihat halaman web secara penuh, hal ini akan mengakibatkan pengalaman pengguna yang buruk.

Perlu mengikuti aturan tambahan yang ada:

1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于屏幕尺寸和宽度以 CSS 像素计在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 设置宽度 CSS 绝对较大的页面元素将导致该元素对于较小设备上的视口太宽。相反，应该考虑使用相对宽度值，例如 width: 100%。此外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。