Cách thiết lập Viewport trong HTML

Viewport meta tag hướng dẫn trình duyệt cách hiển thị và scale trang web trên thiết bị di động. Đây là bước bắt buộc cho Responsive Web Design.

Cú pháp chuẩn

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

Giải thích các tham số

Tham số	Giá trị	Chức năng
`width`	`device-width`	Đặt chiều rộng viewport = chiều rộng màn hình thiết bị
`initial-scale`	`1.0`	Mức zoom ban đầu = 100% (không zoom)
`minimum-scale`	`1.0`	Zoom tối thiểu (mặc định 0.1)
`maximum-scale`	`5.0`	Zoom tối đa (mặc định 10). Không khuyến khích giới hạn
`user-scalable`	`yes` / `no`	Cho phép user zoom. Nên để yes cho accessibility

Ví dụ đầy đủ

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Page</title>
</head>
<body>...</body>
</html>

Tại sao cần viewport?

Mobile browser mặc định giả lập desktop width (980px) → thu nhỏ trang web
Viewport meta tag báo cho browser: "Hãy dùng width thực của thiết bị"
Nếu không có: text nhỏ, phải zoom tay, UX kém

Lưu ý quan trọng

Đặt trong <head>, trước CSS
Không dùng user-scalable=no hoặc maximum-scale=1 (vi phạm accessibility WCAG)
Trên iOS Safari: cần viewport-fit=cover cho notch/Động island
Kết hợp với CSS @viewport (đã deprecated, dùng meta tag)

Kiểm tra

Mở DevTools (F12) → Toggle Device Toolbar (Ctrl+Shift+M) → Chọn device → Kiểm tra layout.