ไม่มีแท็กที่มีความกว้างหรือขนาดเริ่มต้น

หากไม่มีเมตาแท็กวิวพอร์ต อุปกรณ์เคลื่อนที่จะแสดงหน้าตามความกว้างหน้าจอเดสก์ท็อปทั่วไป แล้วลดขนาดหน้าลงทำให้อ่านยาก

การตั้งค่าเมตาแท็กวิวพอร์ตช่วยให้คุณควบคุมความกว้างและการปรับขนาดของวิวพอร์ตเพื่อให้กำหนดขนาดอย่างถูกต้องในอุปกรณ์ทั้งหมด

วิธีที่การตรวจสอบเมตาแท็กวิวพอร์ตของ Lighthouse ล้มเหลว

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 กำหนดระดับการซูมเริ่มต้นเมื่อผู้ใช้เข้าชมหน้าเว็บ

สเกลเริ่มต้นน้อยกว่า 1

หากตั้งค่า initial-scale ไว้ที่น้อยกว่า 1 อาจทำให้เบราว์เซอร์เปิดใช้ฟีเจอร์การแตะ 2 ครั้งเพื่อซูม ซึ่งโดยทั่วไปแล้วจะใช้สำหรับเว็บไซต์ในเดสก์ท็อปที่ไม่ได้เพิ่มประสิทธิภาพให้เหมาะกับอุปกรณ์เคลื่อนที่ การดำเนินการนี้จะเพิ่มการหน่วงเวลา 300 วินาทีให้กับการโต้ตอบการแตะขณะที่เบราว์เซอร์รอเพื่อดูว่ามีการแตะ "2 ครั้ง" ครั้งที่ 2 หรือไม่ ดังนั้น การตรวจสอบจะล้มเหลวเมื่อตั้งค่าระดับเริ่มต้นไว้ที่น้อยกว่า 1

แหล่งข้อมูล