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