Thẻ meta viewport trong HTML được dùng để tạo trang web đáp ứng (responsive). Để trang web có thể điều chỉnh chiều rộng theo viewport.
Cú pháp
Cú pháp như sau:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Các thuộc tính của thẻ meta viewport
| Thuộc tính | Giải thích |
|---|---|
| width | Chỉ định chiều rộng viewport ảo của thiết bị. |
| height | Chỉ định chiều cao viewport ảo của thiết bị. |
| initial-scale | Chỉ định mức thu phóng khi trang được truy cập lần đầu. |
| minimum-scale | Chỉ định mức thu phóng tối thiểu mà người dùng có thể zoom trang. |
| maximum-scale | Chỉ định mức thu phóng tối đa mà người dùng có thể zoom trang. |
| user-scalable | Chỉ định xem người dùng có thể zoom in/out hay không. |
Ví dụ
Dưới đây là ví dụ minh họa thẻ meta viewport HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<h1>Demo thẻ meta viewport HTML</h1>
<p> Đây là một đoạn văn với một số văn bản giả. Đây là một đoạn văn với một số văn bản giả. Đây là một đoạn văn với một số văn bản giả. Đây là một đoạn văn với một số văn bản giả. </p>
<p> Đây là một đoạn văn khác với một số văn bản giả. Đây là một đoạn văn khác với một số văn bản giả. Đây là một đoạn văn khác với một số văn bản giả. Đây là một đoạn văn khác với một số văn bản giả. Đây là một đoạn văn khác với một số văn bản giả. Đây là một đoạn văn khác với một số văn bản giả. </p>
</body>
</html>
Kết quả
Bây giờ hãy thử thay đổi kích thước cửa sổ trình duyệt để quan sát trang hiển thị như thế nào trên thiết bị nhỏ hơn.
