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