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