كيفية الحصول على حجم الشاشة بالبكسل

قد تكون هناك أوقات يحتاج فيها تطبيق JavaScript الخاص بك إلى معرفة حجم الشاشة الذي يجب أن يكون قادرًا على تنفيذ إجراءات معينة.

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

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

قد ترغب في القيام بشيء يتضمن دقة جهاز المستخدم. في هذه الحالة، يجب عليك استخدام المدمج في screen.widthو screen.heightالممتلكات. تمنحك هذه حجم الشاشة التي تتعامل معها.

ليس هذا هو المجال الذي يجب عليك العمل معه على الصفحة .T تمثل القيم ذات المناظر مجمل الشاشة ، وهذا هو دقة العرض الخاص بالمستخدم.

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

قد يكون هناك تطبيق مثير للاهتمام للتعامل مع الحجم الحالي للمتصفح. إذا كنت بحاجة إلى الوصول إلى هذه الأبعاد ، فاستخدم خصائص screen.availWidthو 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.innerWidthهي نفس الخاصية screen.widthو screen.availWidth(ما لم يكن هناك شريط مهام على الجانب ، في هذه الحالة screen.availWidthلن تكون متساوية). window.innerHeightيساوي مقدار المساحة في نافذة الصفحة نفسها (منطقة صفحة الويب).

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

إذا كنت بحاجة إلى معرفة طول أو عرض صفحة الويب الخاصة بك بالفعل ، فهناك خصائص للاستيلاء على هذه الأبعاد: document.body.offsetWidthو document.body.offsetHeight.

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

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