בלי תג viewport meta, מכשירים ניידים מעבדים דפים ברוחב מסך אופייני של מחשב, ואז מקטינים את הדפים, מה שמקשה על הקריאה שלהם.
הגדרת תג מטא של אזור התצוגה מאפשרת לשלוט ברוחב ובשינוי הגודל של אזור התצוגה, כך שהגודל שלו יהיה נכון בכל המכשירים.
איך הביקורת של מטא תג אזור התצוגה ב-Lighthouse נכשלת
Lighthouse מסמן דפים ללא מטא תג של אזור תצוגה:
דף לא עובר את הביקורת אלא אם מתקיימים כל התנאים הבאים:
- המסמך <head> מכיל תג <meta name="viewport">.
– מטא תג אזור התצוגה מכיל מאפיין content.
– הערך של מאפיין content כולל את הטקסט width=.
איך מוסיפים מטא תג של אזור התצוגה
מוסיפים תג viewport <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.