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