Thẻ meta HTML Viewport được sử dụng để tạo trang web đáp ứng. Vì vậy, trang web đó có thể điều chỉnh độ rộng của nó theo chế độ xem.
Cú pháp
Sau đây là cú pháp -
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
Các thuộc tính của thẻ meta chế độ xem
| Thuộc tính | Giải thích |
|---|---|
| chiều rộng | Nó chỉ định chiều rộng khung nhìn ảo của thiết bị. |
| chiều cao | Nó chỉ định chiều cao khung nhìn ảo của thiết bị. |
| quy mô ban đầu | Nó chỉ định mức thu phóng khi trang được truy cập lần đầu tiên. |
| quy mô tối thiểu | Nó chỉ định mức thu phóng tối thiểu mà người dùng có thể thu phóng trang. |
| quy mô tối đa | Nó chỉ định mức thu phóng tối đa mà người dùng có thể thu phóng trang. |
| có thể mở rộng người dùng | Nó chỉ định xem người dùng có thể phóng to hoặc thu nhỏ hay không. |
Ví dụ
Hãy để chúng tôi xem một ví dụ về thẻ meta khung nhìn 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>HTML Viewport meta tag Demo</h1>
<p>
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
This is a paragraph with some dummy text.
</p>
<p>
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
This is another paragraph with some dummy text.
</p>
</body>
</html> Đầu ra
Bây giờ, hãy thử thay đổi kích thước cửa sổ trình duyệt để quan sát cách trang hiển thị trên thiết bị nhỏ hơn.
