เครื่องมือค้นหาจำนวนมากจะจัดอันดับหน้าเว็บตามความเหมาะกับอุปกรณ์เคลื่อนที่ หากไม่มีเมตาแท็กวิวพอร์ต อุปกรณ์เคลื่อนที่จะแสดงหน้าตามความกว้างหน้าจอเดสก์ท็อปทั่วไป แล้วลดขนาดหน้าลงทำให้อ่านยาก
การตั้งค่าเมตาแท็กวิวพอร์ตช่วยให้คุณควบคุมความกว้างและการปรับขนาดของวิวพอร์ตเพื่อให้กำหนดขนาดอย่างถูกต้องในอุปกรณ์ทั้งหมด
วิธีที่การตรวจสอบเมตาแท็กวิวพอร์ตของ Lighthouse ล้มเหลว
Lighthouse จะแจ้งหน้าเว็บที่ไม่มีเมตาแท็กวิวพอร์ต
หน้าเว็บไม่ผ่านการตรวจสอบ เว้นแต่จะเป็นไปตามเงื่อนไขต่อไปนี้ทั้งหมด
- <head> ของเอกสารมีแท็ก <meta name="viewport">
- เมตาแท็กวิวพอร์ตมีแอตทริบิวต์ content
- ค่าแอตทริบิวต์ content มีข้อความ width=
วิธีเพิ่มเมตาแท็กวิวพอร์ต
เพิ่มแท็กวิวพอร์ต <meta> ที่มีคู่คีย์-ค่าที่เหมาะสมลงใน <head> ของหน้าเว็บ ดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1">
…
</head>
…
คู่คีย์-ค่าแต่ละคู่ทำหน้าที่ดังนี้
- width=device-width กำหนดความกว้างของวิวพอร์ตเป็นความกว้างของอุปกรณ์
- initial-scale=1 กำหนดระดับการซูมเริ่มต้นเมื่อผู้ใช้เข้าชมหน้าเว็บ