Viewport là gì?
Viewport là vùng hiển thị nội dung của trang web trên trình duyệt. Kích thước viewport sẽ khác nhau tùy vào thiết bị (PC, tablet, điện thoại…).
Hiểu đơn giản: viewport chính là “cửa sổ” nhìn thấy website của bạn.
Tại sao phải quan tâm tới viewport?
- Kích thước viewport ảnh hưởng trực tiếp đến cách nội dung hiển thị
- Website không dùng thẻ viewport sẽ bị “thu nhỏ toàn trang” trên mobile
- Viewport là nền tảng của responsive web
Thẻ meta viewport trong HTML
Đây là thẻ thiết yếu trong mọi trang web hiện đại:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Ý nghĩa:
width=device-width: Viewport sẽ bằng chiều rộng thực tế của thiết bịinitial-scale=1.0: Zoom mặc định là 100%
Nếu không có thẻ viewport thì sao?
- Website hiển thị như trên PC nhưng bị thu nhỏ toàn trang ở điện thoại
- Text, hình ảnh sẽ bé tí, phải zoom mới xem được
- Responsive layout không hoạt động đúng
Viewport ảnh hưởng đến responsive như thế nào?
Khi thiết bị có viewport khác nhau, bạn có thể dùng media query để thay đổi cách hiển thị:
@media (max-width: 768px) {
body {
font-size: 16px;
}
}Trình duyệt sẽ dựa vào viewport hiện tại để áp dụng CSS phù hợp.
Viewport không phải “màn hình”
- Viewport = phần nội dung hiển thị được, KHÔNG PHẢI độ phân giải màn hình
- Ví dụ: iPhone 14 Pro có màn hình 1170px nhưng viewport mặc định chỉ khoảng 390px
Kiểm tra viewport hiện tại
console.log(window.innerWidth);Đây là chiều rộng thực tế của viewport người dùng tại thời điểm đó (rất hữu ích khi debug layout).
Kết luận
Viewport là yếu tố quyết định hiển thị website trên từng thiết bị. Nếu bạn muốn website của mình hoạt động tốt trên mobile, tablet, PC… thì không thể thiếu thẻ viewport và kiến thức cơ bản về kích thước viewport – đây là bước đầu tiên để làm website responsive đúng chuẩn.