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