หากไม่มีเมตาแท็กวิวพอร์ต อุปกรณ์เคลื่อนที่จะแสดงผลหน้าเว็บตามความกว้างของหน้าจอเดสก์ท็อปทั่วไป แล้วปรับขนาดหน้าเว็บให้เล็กลง ซึ่งทำให้อ่านได้ยาก
การตั้งค่าแท็กเมตาวิวพอร์ตช่วยให้คุณควบคุมความกว้างและการปรับขนาดของวิวพอร์ตเพื่อให้มีขนาดถูกต้องในอุปกรณ์ทุกเครื่อง
สาเหตุที่การตรวจสอบเมตาแท็กวิวพอร์ตของ Lighthouse ไม่สําเร็จ
Lighthouse จะแจ้งว่าหน้าเว็บไม่มีเมตาแท็ก Viewport ในกรณีต่อไปนี้
หน้าเว็บจะไม่ได้รับการตรวจสอบ เว้นแต่จะมีเงื่อนไขทั้งหมดต่อไปนี้
- <head> ของเอกสารมีแท็ก <meta name="viewport">
- เมตาแท็ก 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 ตั้งค่าระดับการซูมเริ่มต้นเมื่อผู้ใช้เข้าชมหน้าเว็บ
Initial-scale น้อยกว่า 1
การตั้งค่า initial-scale เป็นค่าที่น้อยกว่า 1 อาจทําให้เบราว์เซอร์เปิดใช้ฟีเจอร์แตะสองครั้งที่จะซูม ซึ่งปกติจะใช้กับเว็บไซต์บนเดสก์ท็อปที่ไม่ได้เพิ่มประสิทธิภาพเพื่ออุปกรณ์เคลื่อนที่ ซึ่งจะเพิ่มการหน่วงเวลา 300 มิลลิวินาทีในการโต้ตอบด้วยการแตะขณะที่เบราว์เซอร์รอตรวจสอบว่ามีการแตะ "2 ครั้ง" ครั้งที่สองเกิดขึ้นหรือไม่ ดังนั้นการตรวจสอบจะดำเนินการไม่สําเร็จเมื่อตั้งค่า initial-scale เป็นน้อยกว่า 1