בלי תג 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.