يُعد تحديد أبعاد شاشة المستخدم، ونوافذ المتصفح، ومحتوى صفحة الويب بدقة أمرًا بالغ الأهمية لبناء تطبيقات ويب سريعة الاستجابة وسهلة الاستخدام. يوضح هذا الدليل الفروق بين هذه المفاهيم الثلاثة، ويوفر طرقًا موثوقة باستخدام جافا سكريبت لاسترداد أحجامها.
جدول المحتويات
- فهم الفروق بين أبعاد الشاشة، والنوافذ، وصفحة الويب
- استرداد أبعاد الشاشة، والنوافذ، وصفحة الويب باستخدام جافا سكريبت
فهم الفروق بين أبعاد الشاشة، والنوافذ، وصفحة الويب
قبل الغوص في الكود، دعونا نضع تعريفات واضحة:
- الشاشة: تمثل مساحة العرض المادية الكاملة لجهاز المستخدم. تعكس أبعادها إجمالي عدد وحدات البكسل في الشاشة.
- نافذة المتصفح: تشير إلى نافذة المتصفح نفسها – المنطقة التي يتم فيها عرض صفحة الويب الخاصة بك. قد يكون حجم النافذة أصغر من حجم الشاشة إذا لم يتم تكبير المتصفح. ولا تشمل إطار المتصفح (أشرطة الأدوات، والقوائم، إلخ).
- صفحة الويب (المستند): تشمل المحتوى المُرسَم لصفحة الويب الخاصة بك. تعتمد أبعادها على حجم المحتوى، وتخطيطه، وأسلوبه. قد تكون أصغر أو أكبر من نافذة المتصفح (مما يؤدي إلى ظهور أشرطة التمرير).
استرداد أبعاد الشاشة، والنوافذ، وصفحة الويب باستخدام جافا سكريبت
فيما يلي كيفية الحصول على هذه الأبعاد باستخدام جافا سكريبت:
1. حجم الشاشة
const screenWidth = window.screen.width;
const screenHeight = window.screen.height;
console.log(`عرض الشاشة: ${screenWidth} بكسل`);
console.log(`ارتفاع الشاشة: ${screenHeight} بكسل`);
2. حجم النافذة
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
console.log(`عرض النافذة: ${windowWidth} بكسل`);
console.log(`ارتفاع النافذة: ${windowHeight} بكسل`);
3. حجم صفحة الويب (المستند)
يتطلب تحديد الأبعاد الدقيقة لصفحة الويب نهجًا أكثر قوة نظرًا لتناقضات المتصفح. تتعامل الوظيفة التالية مع سيناريوهات مختلفة:
function getDocumentSize() {
const body = document.body;
const html = document.documentElement;
const docWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
const docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
return { width: docWidth, height: docHeight };
}
const documentSize = getDocumentSize();
console.log(`عرض المستند: ${documentSize.width} بكسل`);
console.log(`ارتفاع المستند: ${documentSize.height} بكسل`);
تأخذ هذه الوظيفة في الاعتبار خصائص مختلفة للمحاسبة عن الاختلافات بين المتصفحات، وتضمن قياسًا أكثر دقة للمحتوى المُرسَم، بما في ذلك المناطق التي تقع خارج نطاق العرض المرئي.
من خلال فهم الفروق واستخدام طرق جافا سكريبت هذه، يمكنك إنشاء تطبيقات ويب تتكيف بسلاسة مع أحجام الشاشات المختلفة وتكوينات النوافذ.