---
title: Get Screen Size in Pixels
localeTitle: الحصول على حجم الشاشة بالبكسل
---
قد يكون هناك أوقات يحتاج فيها تطبيق JS إلى معرفة حجم الشاشة لكي تتمكن من تنفيذ إجراءات معينة.

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

## الحصول على قرار المستخدم

قد ترغب في القيام بشيء يتضمن دقة جهاز المستخدم. في هذه الحالة ، يجب عليك استخدام الخصائص المضمنة `screen.width` و `screen.height` . هذه تعطيك حجم الشاشة التي تتعامل معها. **هذه ليست المنطقة التي يجب أن تعمل بها على الصفحة. هذه القيم تمثل كامل الشاشة أي دقة عرض المستخدم.**

## الحصول على حجم المتصفح

قد يكون هناك تطبيق مثير للاهتمام للتعامل مع الحجم الحالي للمتصفح. إذا كنت تريد الوصول إلى هذه الأبعاد ، فاستخدم `screen.availWidth` و `screen.availHeight` properties to do so. تذكر أن هذه هي أبعاد نافذة المتصفح بالكامل ، من أعلى نافذة المتصفح إلى الأسفل حيث يلتقي المتصفح بشريط المهام أو حافة سطح المكتب ، بناءً على الإعداد.

**ملاحظة مهمة** : `screen.availHeight` يمكن استخدام `screen.availHeight` أيضًا لمعرفة طول شريط المهام على جهاز الكمبيوتر. إذا كانت دقة المتصفح هي `1366 x 768` ، و `screen.availHeight` تقارير 728 بكسل ، فإن شريط المهام يكون بارتفاع 40 بكسل. يمكنك أيضًا حساب ارتفاع شريط المهام بطرح `screen.height` و `screen.availHeight` :

 `var taskbarHeight = parseInt(screen.height,10) - parseInt(screen.availHeight,10) + " pixels"; 
 /* 
 For a user that has a screen resolution of 1366 x 768 pixels, their taskbar is likely 40 pixels if using Windows 10 with no added accessibility features. 
 */ 
` 

## الحصول على عرض حجم النافذة

هذه الخصائص مثيرة للاهتمام ويمكن استخدامها لخلق بعض الآثار الأنيقة. يمكنك استخدام `window.innerHeight` و `window.innerWidth` للحصول على حجم النافذة لصفحة الويب كما يراها المستخدم. هذه القيم ليست ثابتة وسوف تتغير حسب ما يحدث مع المتصفح نفسه. بعبارة أخرى ، إذا كان المتصفح نفسه صغيرًا ، فإن هذه القيم ستكون أصغر ، وإذا تم تكبير المتصفح ، فسيكون أكبر.

على سبيل المثال ، إذا كنت تعمل في Google Chrome وفتحت وحدة التحكم (يجب `window.innerHeight` إلى جانب النافذة) ، `window.innerHeight` ليعكس ارتفاع وحدة التحكم لأنه سيتم حظر جزء من النافذة. يمكنك اختبار ذلك عن طريق استدعاء `window.innerHeight` ، `window.innerHeight` علما بالقيمة ، ثم زيادة حجم وحدة التحكم ، و call `window.innerHeight` مرة أخرى.

هذه الخصائص سوف تتغير أيضا إذا تم تكبير المتصفح الخاص بك أو تغيير حجمها بأي شكل من الأشكال. في الحجم الأقصى للمتصفح ، يكون `window.innerWidth` هو نفسه كل من `screen.width` و `screen.availWidth` (ما لم يكن هناك شريط مهام على الجانب ، وفي هذه الحالة لا يكون `screen.availWidth` . يساوي `window.innerHeight` مقدار المساحة في نافذة الصفحة نفسها (منطقة صفحة الويب).

## الحصول على ارتفاع وعرض صفحة الويب

إذا كنت بحاجة إلى معرفة مدى طول صفحة الويب أو عرضها ، فهناك خصائص لجذب هذه الأبعاد: `document.body.offsetWidth` و `document.body.offsetHeight` . تمثل هذه الخصائص حجم المحتوى في نص الصفحة نفسها. تحتوي الصفحة بدون محتوى على `document.body.offsetHeight` تساوي قريبة من نفس القيمة مثل `window.innerHeight` بناءً على ما هي الهوامش / الحشو التي تم تعيينها على نص المستند. إذا تم تعيين الهوامش والحشو إلى `0` على عنصر HTML الأساسي `window.innerHeight` المستند ، فإن `document.body.offsetHeight` و `window.innerHeight` سيكونان متساويين مع عدم وجود محتوى.

يمكن استخدام هذه الخصائص للتفاعل مع صفحتك / تطبيقك بناءً على ما تريد القيام به.

## استنتاج

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