ما هو
الـ iframe هو طريقة لتضمين محتوى صفحة ويب واحدة داخل أخرى — وهو ما يجعل من الممكن وضع فيديو يوتيوب أو خريطة جوجل أو أداة من طرف ثالث مباشرة على صفحتك دون بناء تلك الوظيفة بنفسك. تأتي معظم أكواد التضمين التي تنسخها وتلصقها من هذه الخدمات بعرض وارتفاع بكسل ثابتين مُعدين مسبقًا، بحجم مناسب لشاشة سطح مكتب نموذجية.
تنظر هذه الفحوصات فيما إذا كانت إطارات iframe المضمّنة في صفحة مُعدة لتغيير حجمها مع الشاشة ("متجاوبة")، أو ما إذا كانت تبقى بذلك الحجم الثابت الأصلي بغض النظر عن عرض شاشة الزائر الفعلي.
لماذا يهم
خريطة أو فيديو مضمّن بحجم ثابت 560×315 بكسل، على سبيل المثال، يعمل بشكل جيد على شاشة سطح مكتب لكن يمكن بسهولة أن يكون أعرض من شاشة هاتف بأكملها، مما يفرض نفس نوع التمرير الأفقي أو يُقطع بصريًا تمامًا. هذه مشكلة شائعة ويسهل تفويتها تحديدًا لأن كود التضمين يأتي عادة مكتوبًا مسبقًا من المنصة (يوتيوب، خرائط جوجل) تمامًا كما يُلصق، دون إشارة واضحة إلى أنه يحتاج أي تعديل إضافي للاستخدام على الجوال.
التضمين المعطل ملحوظ أيضًا بشكل غير متناسب مقارنة بمشكلة نصية صغيرة — خريطة مقطوعة إلى النصف أو مشغل فيديو يتجاوز الشاشة يكون واضحًا بصريًا وفوريًا لأي زائر يمرر إلى ذلك الجزء من الصفحة على هاتفه.
كيفية الإصلاح
- حدد كل إطار iframe مضمّن في موقعك — عادة فيديوهات أو خرائط أو أدوات من طرف ثالث — وتحقق من كيفية عرضها على هاتف حقيقي.
- لفّ الـ iframe في حاوية مُنسّقة للتحكم في عرضها كنسبة مئوية، مع ضبط الـ iframe نفسه ليملأ تلك الحاوية (
width: 100%) بدلاً من استخدام عرضه الأصلي الثابت بالبكسل. - بالنسبة لتضمينات يوتيوب تحديدًا، نهج شائع هو استخدام غلاف بنسبة عرض إلى ارتفاع ثابتة (مثل 16:9) يُحجّم الفيديو بشكل متناسب على أي عرض شاشة — تتوفر العديد من مقاطع الكود المجانية لهذا النمط بالضبط.
- إذا كنت تستخدم أداة بناء مواقع، تحقق مما إذا كانت تمتلك كتلة "تضمين" أو "فيديو" مدمجة بدلاً من كود iframe خام — عادة ما تكون هذه متجاوبة بالفعل افتراضيًا.
- أعد فحص التضمين على هاتف بعد ذلك للتأكد من أنه يُغيّر حجمه بشكل صحيح بدلاً من تجاوز الحدود.