เมตาแท็ก HTML Viewport ใช้สำหรับสร้างเว็บไซต์ที่ตอบสนอง เพื่อให้หน้าเว็บสามารถปรับความกว้างได้ตามวิวพอร์ต
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
< meta name=”viewport” content=”width=device-width, initial-scale=1.0” >
คุณสมบัติของเมตาแท็กวิวพอร์ต
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| ความกว้าง | ระบุความกว้างของวิวพอร์ตเสมือนของอุปกรณ์ |
| ความสูง | ระบุความสูงของวิวพอร์ตเสมือนของอุปกรณ์ |
| มาตราส่วนเริ่มต้น | ระบุระดับการซูมเมื่อเข้าชมหน้าเว็บครั้งแรก |
| สเกลขั้นต่ำ | ระบุระดับการซูมขั้นต่ำที่ผู้ใช้สามารถซูมหน้าได้ |
| สเกลสูงสุด | ระบุระดับการซูมสูงสุดที่ผู้ใช้สามารถซูมหน้าได้ |
| ผู้ใช้สามารถปรับขนาดได้ | เป็นตัวกำหนดว่าผู้ใช้สามารถซูมเข้าหรือออกได้ |
ตัวอย่าง
ให้เราดูตัวอย่างของเมตาแท็ก 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> ผลลัพธ์
ตอนนี้ให้ลองปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าหน้าเว็บแสดงบนอุปกรณ์ขนาดเล็กอย่างไร
