เมตาแท็ก Viewport ของ HTML ใช้สำหรับสร้างเว็บไซต์ที่ตอบสนอง (responsive) เพื่อให้หน้าเว็บปรับความกว้างตาม viewport
ไวยากรณ์
<meta name="viewport" content="width=device-width, initial-scale=1.0">
แอตทริบิวต์ของเมตาแท็ก viewport
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| width | ระบุความกว้าง viewport เสมือนของอุปกรณ์ |
| height | ระบุความสูง viewport เสมือนของอุปกรณ์ |
| initial-scale | ระบุระดับซูมเมื่อเข้าชมหน้าครั้งแรก |
| minimum-scale | ระบุระดับซูมขั้นต่ำที่ผู้ใช้ซูมได้ |
| maximum-scale | ระบุระดับซูมสูงสุดที่ผู้ใช้ซูมได้ |
| user-scalable | ระบุว่าผู้ใช้สามารถซูมเข้า/ออกได้หรือไม่ |
ตัวอย่าง
<!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>ตัวอย่างเมตาแท็ก Viewport ของ HTML</h1>
<p> นี่คือพารากราฟพร้อมข้อความตัวอย่าง. นี่คือพารากราฟพร้อมข้อความตัวอย่าง. นี่คือพารากราฟพร้อมข้อความตัวอย่าง. นี่คือพารากราฟพร้อมข้อความตัวอย่าง. </p>
<p> นี่คือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. นี่คือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. นี่คือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. นี่คือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. นี่คือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. นี่คือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. </p>
</body>
</html>
ผลลัพธ์
ลองปรับขนาดหน้าต่างเบราว์เซอร์เพื่อสังเกตการแสดงผลบนอุปกรณ์ขนาดเล็ก
