ضبط حجم المحتوى على إطار العرض

يتم تشغيل هذه القاعدة عندما يكتشف PageSpeed أن محتوى الصفحة لا يتوافق أفقيًا داخل حجم إطار العرض المحدد، ولذلك يُجبر المستخدم على التحرك أفقيًا لعرض المحتوى بالكامل.

نظرة عامة

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

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

التوصيات

ونظرًا للاختلاف الكبير بين أبعاد شاشات الأجهزة (كما هو الحال في الاختلاف بين أبعاد شاشة الهاتف والجهاز اللوحي، بل وبين بعض الهواتف والبعض الآخر)، يتعين عليك تهيئة إطار العرض حتى يتم عرض الصفحات عرضًا سليمًا على العديد من الأجهزة المختلفة. ولكن نظرًا لأن عرض (بالبكسل CSS) إطار العرض قد يختلف، يجب ألا يعتمد محتوى الصفحة على قياس العرض في إطار عرض معين حتى تظهر المحتويات بشكل سليم.

  • تجنب تعيين قيم عرض CSS كبيرة وثابتة لعناصر الصفحة (مثل div{width:360px;})، نظرًا لأن ذلك قد يؤدي إلى أن يكون العنصر عريضًا جدًا بحيث يصعب أن يستوعبه إطار العرض على الأجهزة ذات الشاشات المحدودة (مثل الجهاز الذي يبلغ عرضه 320 بكسل CSS، مثل iPhone). ولكن بدلاً من ذلك يمكنك استخدام قيم العرض النسبية، مثل width:100%. وبالمثل، انتبه لاستخدام قيم ثابتة لتحديد الوضع قد تؤدي إلى خروج العنصر عن إطار العرض على الشاشات الصغيرة.
  • وعند اللزوم يمكن استخدام استعلامات وسائط CSS لتطبيق أنماط مختلفة للشاشات الصغيرة والكبيرة. توفر مقالة HTML5 Rocks هذه مزيدًا من التوصيات حول كيفية التعامل مع هذا الأمر.
  • بالنسبة إلى الصور، توفر هذه المقالة نظرة عامة رائعة حول كيفية عرض الصور التي تراعي الحجم دون إجراء عمليات إعادة تدفق غير ضرورية للصفحة أثناء العرض.