ترتّب العديد من محرّكات البحث الصفحات استنادًا إلى مدى ملاءمتها للأجهزة الجوّالة. بدون العلامة الوصفية لإطار العرض، تعرض الأجهزة الجوّالة الصفحات بعرضها العادي لشاشات سطح المكتب، ثم تصغّر حجم الصفحات، ما يجعل من الصعب قراءتها.
يتيح لك ضبط العلامة الوصفية لإطار العرض التحكم في عرض إطار العرض وقياسه بحيث يتم تحديد حجمه بشكل صحيح على جميع الأجهزة.
كيفية تعذُّر تدقيق العلامة الوصفية لإطار العرض في 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: تحدّد هذه السمة مستوى التكبير/التصغير الأولي عندما يزور المستخدم الصفحة.