5.3 KiB
| title | localeTitle |
|---|---|
| Get Screen Size in Pixels | الحصول على حجم الشاشة بالبكسل |
قد يكون هناك أوقات يحتاج فيها تطبيق 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 سيكونان متساويين مع عدم وجود محتوى.
يمكن استخدام هذه الخصائص للتفاعل مع صفحتك / تطبيقك بناءً على ما تريد القيام به.
استنتاج
تعتمد الخاصية التي تستخدم فقط على ما ترغب في القيام به. اقرأ ما يفعله كل منهم ، واقرر بنفسك الخصائص التي تحتاج إلى استخدامها لمشروعك.