كيفية الحصول على أحجام الشاشة والنافذة وصفحات الويب في جافا سكريبت

يوم جيد يا اصدقاء!



أقدم انتباهكم إلى ترجمة مقالة صغيرة بعنوان "كيفية الحصول على الشاشة ، والنافذة ، وأحجام صفحات الويب في JavaScript" بقلم ديمتري بافلوتين.



لتحديد اتجاه نافذة المتصفح (أفقي أو رأسي) ، يمكنك مقارنة عرضه وارتفاعه.



ومع ذلك ، من السهل الخلط بين جميع أنواع الأحجام المتاحة: فهناك أحجام الشاشة وأحجام النوافذ وصفحات الويب وما إلى ذلك.



ماذا تعني هذه الأحجام ، والأهم من ذلك ، كيفية الحصول عليها؟ هذا ما سأتحدث عنه.

1. الشاشة

1.1. حجم الشاشة

حجم الشاشة هو عرض وارتفاع الشاشة بالكامل: الشاشة أو شاشة الهاتف المحمول.







يمكنك الحصول على معلومات حول حجم الشاشة باستخدام screenخاصية الكائن window:

const screenWidth = window.screen.width
const screenHeight = window.screen.height

1.2. حجم الشاشة المتاح

حجم الشاشة المتاح هو عرض وارتفاع الشاشة النشطة بدون شريط أدوات نظام التشغيل.







للحصول على حجم الشاشة المتاح ، ننتقل مرة أخرى إلى window.screen:

const availableScreenWidth = window.screen.availWidth
const availableScreenHeight = window.screen.availHeight

2. النافذة

2.1. حجم النافذة الخارجية (أو حجم النافذة الخارجية)

حجم النافذة الخارجية هو عرض وارتفاع نافذة المتصفح الحالية ، بما في ذلك شريط العنوان وشريط علامة التبويب ولوحات المتصفح الأخرى.







يمكنك الحصول على معلومات عن حجم النافذة الخارجي باستخدام خصائص outerWidthو outerHeightجوه window:

const windowOuterWidth = window.outerWidth
const windowOuterHeight = window.outerHeight

2.2. حجم النافذة الداخلية (أو حجم النافذة الداخلية)

الحجم الداخلي للنافذة هو عرض وارتفاع إطار العرض (إطار العرض). يوفر







الكائن windowخصائص innerWidthو innerHeight:

const windowInnerWidth = window.innerWidth
const windowInnerHeight = window.innerHeight

إذا أردنا الحصول على الحجم الداخلي للنافذة بدون أشرطة التمرير ، فقم بما يلي:

const windowInnerWidth = document.documentElement.clientWidth
const windowInnerHeight = document.documentElement.clientHeight

3. حجم صفحة الويب

حجم صفحة الويب هو عرض المحتوى المعروض وارتفاعه (المحتوى المعروض).







استخدم ما يلي للحصول على حجم صفحة الويب (بما في ذلك حشو الصفحة ، ولكن باستثناء الحدود والحشو وأشرطة التمرير):

const pageWidth = document.documentElement.scrollWidth
const pageHeight = document.documentElement.scrollHeight

إذا كان pageHeightأكبر من الارتفاع الداخلي للنافذة ، فهناك شريط تمرير رأسي.

4. الخلاصة

آمل أن تفهم الآن كيفية الحصول على أحجام مختلفة.



حجم الشاشة هو حجم الشاشة (أو الشاشة) ، وحجم الشاشة المتاح هو حجم الشاشة بدون أشرطة أدوات نظام التشغيل.



حجم النافذة الخارجية هو حجم نافذة المتصفح النشطة (بما في ذلك شريط البحث وشريط علامة التبويب والأشرطة الجانبية المفتوحة وما إلى ذلك) ، وحجم النافذة الداخلية هو حجم إطار العرض.



أخيرًا ، حجم صفحة الويب هو حجم المحتوى.



شكرا لكم على اهتمامكم ، أصدقاء!