حجم الشاشة والنافذة والصفحة في JavaScript: 5 أخطاء قاتلة وكيفية تجنبها

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

الحجم مهم: لماذا "تكسر" البرامج النصية التخطيط

\n\n

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

\n\n

في أغلب الأحيان، جذر المشكلة هو الحصول غير الصحيح على أحجام الشاشة أو نافذة المتصفح أو الصفحة نفسها. سؤال "Get the size of the screen, current web page and browser window" على Stack Overflow حصد مئات الآلاف من المشاهدات. وهذا ليس من قبيل الصدفة: حتى المطورين ذوي الخبرة يخلطون بين screen.width و window.innerWidth و document.documentElement.clientWidth.

\n\n

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

\n\n

أهم 5 أخطاء عند التعامل مع الأحجام في JavaScript

\n\n

الخطأ رقم 1: استخدام screen.width بدلاً من window.innerWidth

\n\n

هذا كلاسيكي. المطور يريد معرفة عرض منطقة العرض (viewport) ويكتب:

\n\n

// ❌ غير صحيح\nconst viewportWidth = screen.width;\nconsole.log(viewportWidth); // 1920 (لكن هذا ليس viewport!)\n

\n\n

ما المشكلة؟ screen.width يُرجع العرض الفعلي للشاشة بالبكسل. لا يتغير إذا قمت بتصغير نافذة المتصفح أو فتح أدوات المطور. بينما window.innerWidth هو عرض منطقة العرض (viewport)، أي الجزء من النافذة الذي يُعرض فيه المحتوى.

\n\n

متى يكسر هذا الموقع: إذا قمت بحساب الكتل المتجاوبة بناءً على screen.width، فعند فتح DevTools أو تصغير النافذة، لن يعاد تخطيط الموقع. سيرى المستخدم إما فراغًا أو تداخل العناصر.

\n\n

// ✅ صحيح\nconst viewportWidth = window.innerWidth;\nconsole.log(viewportWidth); // العرض الحالي للمنطقة المرئية\n

\n\n

الخطأ رقم 2: نسيان شريط التمرير (scrollbar)

\n\n

ثاني أكثر فخ شيوعًا. المطور يحصل على ارتفاع النافذة ويحاول وضع عنصر في المنتصف تمامًا:

\n\n

// ❌ غير صحيح\nconst windowHeight = window.innerHeight;\nelement.style.top = windowHeight / 2 + 'px';\n

\n\n

للوهلة الأولى، كل شيء صحيح. لكن إذا كان المحتوى أطول من الشاشة ويوجد شريط تمرير، فإن window.innerHeight يشمل ارتفاعه. ونتيجة لذلك، قد "ينزلق" العنصر خارج الحد السفلي للمنطقة المرئية.

\n\n

الحل: استخدم document.documentElement.clientHeight - فهو يُرجع ارتفاع viewport بدون احتساب شريط التمرير.

\n\n

// ✅ صحيح لتحديد الموضع في المنطقة المرئية\nconst viewportHeight = document.documentElement.clientHeight;\nelement.style.top = viewportHeight / 2 + 'px';\n

\n\n

\n
تذكر القاعدة: window.innerWidth/innerHeight - مع احتساب شريط التمرير. document.documentElement.clientWidth/clientHeight - بدون احتساب شريط التمرير. اختر حسب المهمة.
\n

\n\n

الخطأ رقم 3: الخلط بين حجم النافذة وحجم الصفحة

\n\n

تريد معرفة إلى أي مدى قام المستخدم بالتمرير، وتحسب الارتفاع الكلي للصفحة:

\n\n

// ❌ غير صحيح\nconst pageHeight = window.innerHeight;\nconsole.log(pageHeight); // هذا ليس ارتفاع الصفحة!\n

\n\n

window.innerHeight هو ارتفاع النافذة، وليس المستند. للحصول على الارتفاع الكلي للصفحة (بما في ذلك الجزء الممرر)، يجب استخدام document.documentElement.scrollHeight.

\n\n

مثال واقعي: أنت تنشئ خلاصة لا نهائية (infinite scroll). إذا استخدمت window.innerHeight لتحديد لحظة تحميل المنشورات الجديدة، فسيعمل البرنامج النصي مرة واحدة فقط ولن يعمل بعد ذلك