41 lines
5.3 KiB
Markdown
41 lines
5.3 KiB
Markdown
|
---
|
||
|
|
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` سيكونان متساويين مع عدم وجود محتوى.
|
||
|
|
|
||
|
|
يمكن استخدام هذه الخصائص للتفاعل مع صفحتك / تطبيقك بناءً على ما تريد القيام به.
|
||
|
|
|
||
|
|
## استنتاج
|
||
|
|
|
||
|
|
تعتمد الخاصية التي تستخدم فقط على ما ترغب في القيام به. اقرأ ما يفعله كل منهم ، واقرر بنفسك الخصائص التي تحتاج إلى استخدامها لمشروعك.
|