מנועי חיפוש רבים מדרגים דפים על סמך מידת ההתאמה שלהם לניידים. בלי מטא תג של אזור התצוגה, מכשירים ניידים מעבדים דפים ברוחב מסך אופייני של מחשבים ואז מקטינים את הדפים כדי שיהיה קשה לקרוא אותם.
הגדרת המטא תג של אזור התצוגה מאפשרת לשלוט ברוחב ובשינוי הגודל של אזור התצוגה כך שהגודל שלו יהיה נכון בכל המכשירים.
איך נכשלת הבדיקה של המטא תגים של אזור התצוגה ב-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 מגדיר את מרחק התצוגה הראשוני כאשר המשתמש מבקר בדף.