انتقل إلى المحتوى
SEO Madmanby Adam Hafez
أداة مجانية

فحص علامة meta viewport للجوّال والتكبير

افحص قيمة content في علامة viewport: المفاتيح غير المعروفة، وwidth=device-width، ومنع التكبير وفق WCAG 1.4.4. أداة مجانية في متصفحك.

تعمل بالكامل في متصفحك. لا يُرفع ما تُدخله، ولا يُسجَّل، ولا يُحفظ.

يجري التحليل كله في متصفحك، وفق قائمة الخصائص المعترف بها في مواصفة W3C CSS Viewport Module. لا يُرسل أي شيء تكتبه إلى أي مكان.

أهم النقاط

  • تذكر مواصفة W3C CSS Viewport Module سبع خصائص معترف بها لعلامة viewport، وتقبل الأداة أيضًا viewport-fit من مواصفة CSS Round Display.
  • تقول Google إن علامة viewport تخبر المتصفح بطريقة عرض الصفحة على الأجهزة الجوّالة، وإن وجودها يدل على أن الصفحة ملائمة للجوّال.
  • يشترط معيار WCAG 1.4.4 في المستوى AA إمكانية تكبير النص حتى 200% دون فقدان المحتوى أو الوظائف.
  • تُفشل قاعدة W3C لاختبار سماح علامة viewport بالتكبير القيمة user-scalable=no وأي maximum-scale أقل من 2.
  • تحلّل الأداة قيمة content التي تكتبها فقط، ولا ترى هل يستجيب تصميم الصفحة الحقيقية للعرض الذي تعلنه.

ما تحتاج إليه

  • قيمة السمة content في علامة meta viewport

أدوات أخرى

كلها مجانية، وكلها تعمل في المتصفح.

تصفّح الأدوات

طريقة الاستخدام

  1. 1الصق قيمة السمة contentانسخ القيمة داخل content="..." فقط، مثل "width=device-width, initial-scale=1"، لا علامة meta كاملة.
  2. 2ابحث عن المفاتيح غير المعروفةالمفتاح خارج القائمة المعترف بها ليس خطأ في HTML، لكن محلّل المواصفة لا يفعل به شيئًا، فلا يكون له أي أثر.
  3. 3تأكد من width=device-width وinitial-scale=1هاتان القيمتان هما الزوج المعتاد للتصميم المتجاوب. والعرض الثابت بالبكسل بدل device-width يفرض عرض التصميم نفسه على كل الشاشات.
  4. 4اقرأ فحص إتاحة التكبيرالعلامة الحمراء هنا تعني وجود user-scalable=no أو maximum-scale أقل من 2، وهو ما تُفشله قاعدة W3C لاختبار التكبير وفق WCAG 1.4.4.
  5. 5احذف القيمة التي تمنع التكبيرحذف user-scalable=no وأي maximum-scale أقل من 2 يزيل العلامة دون تغيير عرض التصميم الذي تعلنه العلامة.

الصق قيمة السمة content من علامة viewport، وستعطيك الأداة سطرًا لكل فحص: سليم أو تحذير أو معلومة أو مشكلة. ويجري التحليل في متصفحك، ولا يُرسل أي شيء إلى أي مكان.

ماذا تفحص الأداة؟

  • المفاتيح المعترف بها. تذكر مواصفة W3C CSS Viewport Module Level 1 سبع خصائص لعلامة viewport: width وheight وinitial-scale وminimum-scale وmaximum-scale وuser-scalable وinteractive-widget.
  • viewport-fit. تقبلها الأداة أيضًا، وهي معرّفة في مواصفة W3C CSS Round Display بالقيم auto وcontain وcover. وأي مفتاح آخر تسمّيه الأداة غير معروف.
  • width=device-width. تقول صفحة Google عن العلامات الخاصة إن علامة viewport تخبر المتصفح بطريقة عرض الصفحة على الأجهزة الجوّالة. والعرض الثابت بالبكسل يفرض عرضًا واحدًا على كل الشاشات، لذلك تعطي أي قيمة غير device-width تحذيرًا.
  • initial-scale=1. القيمة المعتادة مع device-width. والقيمة المختلفة أو المفقودة معلومة، لا خطأ.
  • التكبير. يشترط معيار WCAG 1.4.4 في المستوى AA نصًا يمكن تكبيره حتى 200%. وقاعدة W3C لاختبار سماح علامة viewport بالتكبير تُفشل العلامة التي فيها user-scalable=no أو maximum-scale أقل من 2.
  • user-scalable=0. تنبّه الأداة إلى الحالتين السابقتين، وتعامل user-scalable=0 أيضًا كتكبير معطّل.
  • height. تعترف بها المواصفة، لكنها غير معتادة مع عرض متجاوب، لذلك تظهر كمعلومة تستحق المراجعة.
  • الفواصل. يقبل محلّل المواصفة الفواصل والفواصل المنقوطة، ويقول إن على المطوّرين استخدام الفواصل. وتقسّم الأداة القيمة عند الاثنين.

كيف تقرأ النتائج؟

  • مشكلة (أحمر): التكبير معطّل، أو قيمة content فارغة. أصلح هذه أولًا، فالسمة الفارغة تساوي غياب علامة viewport.
  • تحذير (برتقالي): مفتاح غير معروف، أو width مفقودة أو بقيمة غير device-width.
  • معلومة (رمادي): initial-scale ليست 1 تمامًا، أو height محددة. ويقارن فحص initial-scale النص حرفيًا، لذلك تظهر initial-scale=1.0 كمعلومة مع أنها الرقم نفسه.
  • سليم (أخضر): الفحص مطابق.

مثال عملي

تبدأ الأداة بعلامة شائعة لكنها معيبة:

width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no

تنجح كل المفاتيح كمعترف بها، وتنجح width=device-width وinitial-scale=1. أما سطر التكبير فمشكلة: “معطّل (user-scalable=no)”، لأن قاعدة W3C لاختبار التكبير تُفشل هذا الإعداد. احذف القيمتين الأخيرتين:

width=device-width, initial-scale=1

تنجح الآن كل الأسطر، ويقول سطر التكبير “متاح”.

أخطاء شائعة تكشفها

  • إيقاف التكبير. استُخدمت user-scalable=no وmaximum-scale=1 قديمًا لمنع التكبير بالنقر المزدوج على الجوّال. وكلاهما يفشل في قاعدة W3C للتكبير، ولا يستطيع الزائر ضعيف البصر تجاوزهما.
  • العروض الثابتة. تعرض width=1024 تصميمًا بعرض الكمبيوتر على الهاتف، وتنبّه الأداة إليها لصالح device-width.
  • مفاتيح بلا أثر. تسمّي الأداة target-densitydpi والأخطاء الإملائية مثل intial-scale، لأن المتصفح يتجاهلها.
  • لصق العلامة كاملة. لصق <meta name="viewport" ...> بدل قيمة content يجعل أول مفتاح غير معروف، ويجعل width مفقودة. الصق ما بين علامتي التنصيص فقط.

حالة خاصة: قاعدة W3C تقبل maximum-scale=-1، لأن القيمة السالبة تُسقط. أما هذه الأداة فتنبّه إلى أي رقم أقل من 2، ومنه -1، فاعتبر هذه النتيجة وحدها إنذارًا خاطئًا واحذف القيمة.

أدوات وقراءات ذات صلة

المصادر

  1. 1.CSS Viewport Module Level 1، W3Cمصدر أساسي
  2. 2.Meta tags and attributes that Google supports، Google Search Central
  3. 3.Understanding Success Criterion 1.4.4: Resize Text، W3C Web Accessibility Initiative
  4. 4.Meta viewport allows for zoom، W3C Web Accessibility Initiativeمصدر أساسي
  5. 5.CSS Round Display Level 1، W3C

أسئلة شائعة

ما علامة meta viewport الصحيحة؟

العلامة المتجاوبة المعتادة هي content="width=device-width, initial-scale=1"، وتنجح في كل الفحوص هنا. ولا تضف user-scalable=no ولا maximum-scale أقل من 2، ليبقى التكبير متاحًا للزوار.

هل يضر غياب علامة viewport بالترتيب مباشرة؟

تقول صفحة Google عن العلامات الخاصة إن العلامة تخبر المتصفح بطريقة عرض الصفحة على الأجهزة الجوّالة، وإن وجودها يدل على ملاءمة الصفحة للجوّال. ولا تصف الصفحة عقوبة مستقلة في الترتيب عند غيابها.

لماذا التنبيه على maximum-scale أقل من 2 تحديدًا؟

يطلب WCAG 1.4.4 إمكانية تكبير النص حتى 200%. وقاعدة W3C لاختبار تكبير viewport تُفشل maximum-scale أقل من 2 وتقبل 2.0، لذلك تعتمد الأداة 2 حدًا.

ماذا تفعل الخاصية غير المعروفة فعلًا؟

لا شيء. محلّل المواصفة يضبط الخصائص المدرجة فيها فقط، لذلك لا يكون للخطأ الإملائي أو لمفتاح قديم مثل target-densitydpi أي أثر، ولا يكسر العلامة. وتسمّيه الأداة لتحذفه أو تصححه.

هل أفصل القيم بفواصل أم بفواصل منقوطة؟

بالفواصل. تقول مواصفة W3C إن على المطوّرين استخدام الفواصل ليعمل content في كل المتصفحات، مع أن بعضها يقبل الفواصل المنقوطة أيضًا. وتقبل الأداة الاثنين عند التحليل.