Viewport trong thiết kế web là khu vực hiển thị nhìn thấy được của trang web trên màn hình thiết bị. Trên desktop là kích thước cửa sổ trình duyệt, trên mobile là màn hình thiết bị.
Vấn đề nếu không set viewport
- Mobile browser giả lập width ~980px (desktop)
- Trang web bị thu nhỏ, text nhỏ, phải zoom tay
- Horizontal scroll không mong muốn
Cách thiết lập Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Chi tiết các giá trị
| Thuộc tính | Giá trị | Ý nghĩa |
|---|---|---|
width | device-width | Viewport width = màn hình thiết bị (CSS pixels) |
initial-scale | 1.0 | Zoom level ban đầu = 100% |
minimum-scale | 1.0 | Zoom out tối thiểu (khuyên: không giới hạn) |
maximum-scale | 5.0 | Zoom in tối đa (khuyên: không giới hạn) |
user-scalable | yes | Cho phép user zoom (bắt buộc cho accessibility) |
Viewport units trong CSS
CSS cung cấp đơn vị نسبية dựa trên viewport:
| Đơn vị | Ý nghĩa |
|---|---|
vw | 1% viewport width |
vh | 1% viewport height |
vmin | 1% min(width, height) |
vmax | 1% max(width, height) |
dvh, dvw | Dynamic viewport (mobile browser UI) |
svh, svw | Small viewport (khi UI ẩn) |
lvh, lvw | Large viewport (khi UI hiện) |
Ví dụ sử dụng viewport units
.hero {
min-height: 100vh; /* Toàn màn hình */
min-height: 100dvh; /* Hiện đại: trừ thanh address bar mobile */
}
.headline {
font-size: clamp(2rem, 5vw + 1rem, 4rem); /* Responsive typography */
}
Lưu ý
- Viewport meta tag bắt buộc cho responsive design
- Đặt sớm nhất trong
<head> - Không chặn zoom người dùng (accessibility)
- Kết hợp với CSS media queries cho responsive hoàn chỉnh