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

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

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

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

หน้าแฟล็ก Lighthouse ที่ไม่มีเมตาแท็กวิวพอร์ต

การตรวจสอบ Lighthouse แสดงว่าหน้าเว็บไม่มีวิวพอร์ต

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

ระดับเริ่มต้นน้อยกว่า 1

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

แหล่งข้อมูล