Ngày nay, người dùng truy cập web bằng điện thoại nhiều hơn cả máy tính. Nếu trang web của bạn không tương thích với màn hình nhỏ, nội dung sẽ bị lệch, chữ quá nhỏ hoặc không thể cuộn được.
HTML5 hỗ trợ một thẻ đặc biệt – meta viewport – để giúp trang hiển thị đẹp và chính xác trên mọi loại thiết bị.
1. Viewport là gì?
Viewport là vùng hiển thị nội dung của trang web trên thiết bị người dùng.
Trên máy tính, viewport thường là cửa sổ trình duyệt.
Trên điện thoại, viewport là kích thước của màn hình điện thoại.
Nếu không cấu hình viewport, điện thoại sẽ hiển thị trang web theo kích thước máy tính, khiến mọi thứ bị thu nhỏ lại và khó sử dụng.
2. Thẻ meta viewport chuẩn
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Giải thích:
width=device-width: lấy đúng chiều rộng thật của thiết bị.initial-scale=1.0: mức thu phóng ban đầu là 100%, không phóng to thu nhỏ.
Thẻ này phải đặt trong phần <head> của tài liệu HTML.
3. Trước và sau khi dùng viewport
Không có meta viewport:
- Trên điện thoại: trang hiển thị như phiên bản máy tính thu nhỏ.
- Phải zoom tay để đọc chữ.
Có meta viewport:
- Trang co giãn theo chiều rộng màn hình.
- Chữ và nút đủ lớn để tương tác dễ dàng.
4. Responsive là gì?
Responsive Web Design (thiết kế đáp ứng) là cách viết web tự động điều chỉnh kích thước, bố cục, cỡ chữ, hình ảnh… tùy theo thiết bị đang dùng.
Để tạo responsive, bạn thường kết hợp:
meta viewport- CSS media queries
- Layout linh hoạt (flexbox, grid, % thay vì px)
5. Ví dụ cơ bản với viewport
Tạo file responsive-demo.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive demo</title>
<style>
body {
font-family: Arial;
padding: 20px;
}
.box {
background-color: lightblue;
padding: 20px;
font-size: 24px;
}
@media (max-width: 600px) {
.box {
background-color: lightcoral;
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="box">Nội dung hiển thị phù hợp với thiết bị</div>
</body>
</html>
Thử nghiệm:
- Mở file trên trình duyệt máy tính rồi thu hẹp cửa sổ lại.
- Màu và cỡ chữ sẽ thay đổi khi chiều rộng nhỏ hơn 600px (giả lập điện thoại).
6. Lưu ý khi thiết kế responsive
| Kinh nghiệm tốt | Giải thích ngắn |
|---|---|
Dùng đơn vị tương đối (%, em, rem) | Giúp tự co giãn theo màn hình |
Tránh dùng chiều rộng cố định (width: 1000px) | Dễ gây tràn nội dung trên điện thoại |
Luôn thêm meta viewport | Là điều kiện bắt buộc đầu tiên |
| Kiểm tra trên nhiều thiết bị | Có thể dùng trình giả lập hoặc điện thoại thật |
7. Ghi nhớ
| Thành phần | Vai trò |
|---|---|
meta viewport | Giúp trang co giãn đúng trên các thiết bị |
width=device-width | Gán chiều rộng theo thiết bị thật |
initial-scale=1.0 | Phóng to/thu nhỏ ở mức mặc định |
| Media query CSS | Áp dụng kiểu dáng khác nhau theo kích thước màn hình |
Kết thúc phần 2: HTML nâng cao và tương tác
Bạn vừa hoàn thành 24 bài học HTML cơ bản và nâng cao, đủ để:
- Viết một trang web tĩnh hoàn chỉnh
- Tạo biểu mẫu, bảng, đa phương tiện
- Tối ưu hiển thị và hỗ trợ người dùng trên mọi thiết bị
Thảo luận