R040: تمرير أفقي على مستوى المستند

ما الذي يتجاهله عمدًا

الفائض بمقدار 4px أو أقل، فهو تقريب وضجيج شريط التمرير، والتمرير الجانبي داخل عنصر، كجدول عريض في حاوية تمرير خاصة به، فهو لا يوسّع الصفحة. لا يقتصر على الصفحات العربية: الصفحة الفائضة معطوبة بأي لغة.

قبل الإصلاح وبعده

.hero-banner {
  width: 600px;
}

.hero-banner {
  width: 600px;
  max-width: 100%;
}

افحصه يدويًا

اجعل نافذة العرض بعرض الهاتف، ثم شغّل [document.documentElement.scrollWidth, document.documentElement.clientWidth, [...document.querySelectorAll('body *')].filter((e) => { const r = e.getBoundingClientRect(); return r.right > innerWidth || r.left < 0; }).slice(0, 5)] في وحدة تحكم DevTools. الرقم الأول الأكبر من الثاني هو الملاحظة، والقائمة تُظهر العناصر البارزة من أي جانب؛ وفي الصفحة من اليمين إلى اليسار كثيرًا ما يخرج الفائض من اليسار.

ما يعرضه لك التقرير

تحمل كل ملاحظة من R040 ما ينطبق عليها من الحقول أدناه، فترى سبب ظهورها دون إعادة الفحص.

scrollWidth

عرض محتوى الصفحة، بالبكسل.

clientWidth

عرض نافذة العرض، بالبكسل.

breakpoint

mobile (الجوال) أو tablet (الجهاز اللوحي) أو desktop (سطح المكتب).

widestElements

العناصر التي تمتد أبعد من نافذة العرض، مع حجمها: نقطة البداية.