Viewport là gì?
Viewport (vùng hiển thị) là phần cửa sổ trình duyệt dùng để vẽ và hiển thị trang web. Đây không phải toàn bộ màn hình vật lý của thiết bị, mà là khu vực bên trong cửa sổ trình duyệt, không tính thanh địa chỉ, thanh tab hay taskbar (thanh tác vụ) của hệ điều hành.
Trên máy tính, viewport thay đổi khi bạn thu nhỏ cửa sổ Chrome. Trên điện thoại, viewport thường bằng với chiều rộng màn hình thiết bị, nhưng được tính theo CSS pixel (điểm ảnh CSS) chứ không phải pixel vật lý. Đó là lý do tại sao iPhone 15 có màn hình 1179px vật lý nhưng viewport lại là 390px CSS.
Viewport hoạt động liên quan chặt chẽ với breakpoint (điểm chuyển layout) và media query (quy tắc CSS áp theo điều kiện màn hình) để tạo ra thiết kế responsive hoàn chỉnh.
Visual viewport, layout viewport và ideal viewport là gì?
Có ba loại viewport thường gặp khi làm web, mỗi loại phục vụ một mục đích riêng:
| Loại | Là gì | Ví dụ (iPhone 15) |
|---|---|---|
| Pixel vật lý | Pixel thực trên màn hình thiết bị | 1179 x 2556 px |
| Layout viewport | Vùng trình duyệt dùng để tính layout CSS | 390 x 844 CSS px |
| Visual viewport | Phần layout viewport đang hiển thị (khi zoom hoặc bàn phím ảo bật) | Thu nhỏ khi bàn phím ảo xuất hiện |
Trong thực tế, khi bạn viết @media (max-width: 768px), bạn đang kiểm tra layout viewport. Khi dùng đơn vị vw (viewport width) trong CSS, bạn cũng tham chiếu layout viewport. Visual viewport ít khi cần xử lý trực tiếp, trừ khi bạn đang xây dựng ứng dụng web phức tạp có bàn phím ảo.
Thẻ meta viewport là gì và vì sao không được bỏ?
Đây là dòng HTML thường nằm trong <head> của mọi trang web responsive:
<meta name="viewport" content="width=device-width, initial-scale=1">Không có dòng này, điện thoại sẽ render trang web theo chiều rộng mặc định khoảng 980px rồi thu nhỏ lại cho vừa màn hình. Hậu quả: chữ nhỏ li ti, người dùng phải zoom tay mới đọc được, và Google đánh giá trải nghiệm di động của trang là kém.
width=device-width báo trình duyệt dùng chiều rộng thiết bị làm layout viewport. initial-scale=1 giữ tỉ lệ zoom ban đầu là 100%, không tự phóng to hay thu nhỏ. Hai tham số này gần như bắt buộc với mọi dự án web hiện đại.
Các đơn vị CSS dựa trên viewport
CSS cung cấp một nhóm đơn vị tính dựa trên kích thước viewport. Nhóm cũ (vw, vh) đã có từ lâu; nhóm mới (dvh, svh, lvh) được thêm từ 2022 để giải quyết vấn đề thanh địa chỉ trên mobile:
| Đơn vị | Ý nghĩa | Ghi chú |
|---|---|---|
vw | 1% chiều rộng layout viewport | Dùng tốt cho chiều rộng |
vh | 1% chiều cao layout viewport | Hay bị che bởi thanh địa chỉ trên mobile |
dvh | 1% chiều cao dynamic viewport | Thay thế vh cho hero section, hỗ trợ từ 2022 |
svh | 1% chiều cao viewport nhỏ nhất | Chiều cao khi thanh địa chỉ hiện đầy đủ |
lvh | 1% chiều cao viewport lớn nhất | Chiều cao khi thanh địa chỉ thu gọn |
vh truyền thống hay gây lỗi trên mobile: phần tử height: 100vh bị che bởi thanh địa chỉ của Chrome/Safari trên điện thoại. Từ 2022-2023, dvh (dynamic viewport height) giải quyết vấn đề này. Tính đến giữa 2025, Chrome 108+, Safari 15.4+, Firefox 101+ đều hỗ trợ, nên dvh đã an toàn để dùng trong dự án mới.
Cách xem viewport hiện tại bằng DevTools
Chrome DevTools cho phép xem và thay đổi kích thước viewport ngay trong trình duyệt:
- Nhấn F12 mở DevTools
- Bật Device Toolbar bằng Ctrl+Shift+M hoặc nhấn biểu tượng điện thoại góc trên trái
- Số hiện phía trên là kích thước viewport hiện tại (chiều rộng x chiều cao)
- Kéo cạnh cửa sổ hoặc gõ thẳng con số để thay đổi
Bạn cũng có thể kiểm tra bằng JavaScript ngay trong Console của DevTools:
console.log(window.innerWidth, window.innerHeight); // layout viewport
console.log(screen.width, screen.height); // màn hình vật lýHai con số này khác nhau là điều bình thường trên điện thoại, đúng theo bản chất của CSS pixel và Device Pixel Ratio (DPR).
Người không rành kỹ thuật cần biết gì về viewport?
Khi thuê làm web, điều đáng kiểm tra là: web có khai báo thẻ meta viewport chưa? Thiếu dòng đó là web trông xấu trên điện thoại từ bước đầu tiên. Đây là thứ đơn giản nhưng hay bị bỏ qua ở các theme cũ hoặc khi tự cài WordPress mà không kiểm tra lại.
Cách tự kiểm tra nhanh: mở web trên điện thoại, dùng 2 ngón tay zoom ra. Nếu web zoom ra rất lớn và chữ bỗng to bất thường, rất có thể initial-scale=1 đang bị thiếu hoặc bị ghi đè bởi một theme hay plugin nào đó. Đây là lỗi cần sửa, không phải thứ chấp nhận được.
Muốn tìm hiểu thêm về cách thiết kế web co giãn theo từng thiết bị, xem thêm bài về flexbox và CSS grid để hiểu công cụ layout phổ biến nhất hiện nay.
Câu hỏi thường gặp về viewport
- Viewport và độ phân giải màn hình có khác nhau không?
- Khác nhau. Độ phân giải là số pixel vật lý thực của màn hình (ví dụ iPhone 15 là 1179px). Viewport là số CSS pixel trình duyệt dùng để tính layout (390px). Tỉ lệ giữa hai số này gọi là Device Pixel Ratio (DPR). iPhone 15 có DPR=3 vì 1179 chia 390 bằng 3.
- Tại sao có lúc font chữ trên điện thoại tự to lên không mong muốn?
- Đó là tính năng text size adjust (điều chỉnh cỡ chữ tự động) của trình duyệt mobile. Khi phát hiện layout viewport rộng hơn thiết bị, trình duyệt tự phóng to chữ để dễ đọc. Thêm
-webkit-text-size-adjust: 100%vào CSS để tắt hành vi này nếu cần. - dvh đã dùng được rộng rãi chưa hay còn phải dùng fallback?
- Hỗ trợ từ Chrome 108, Safari 15.4, Firefox 101, tức là từ cuối 2022. Tính đến giữa 2025, gần như mọi thiết bị đang dùng thực tế đều hỗ trợ. Có thể dùng dvh trực tiếp cho dự án mới mà không cần fallback phức tạp.
- Viewport có ảnh hưởng đến SEO không?
- Có. Google đánh giá trải nghiệm di động, và thiếu meta viewport hoặc layout vỡ trên mobile là tín hiệu tiêu cực. Lighthouse (công cụ đo hiệu suất web của Google) có hạng mục kiểm tra meta viewport và responsive design riêng.
Muốn website hiển thị chuẩn trên mọi thiết bị từ nền móng, xem thêm dịch vụ thiết kế website responsive của Web22.