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