جافاسكربتخصائص الشاشة

ما هو الكائن screen؟
الحصول على طول و عرض الشاشة
الحصول على المساحة المتاحة في الشاشة
الحصول على دقة ألوان الشاشة
الحصول على عدد البتات في كل بكسل في الشاشة
الحصول على إتجاه الشاشة

ما هو الكائن screen؟

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

هذه المعلومات تحتاجها إذا كنت تبني تصاميم تتطلب شاشات بمواصفات محددة حتى تعمل.

الحصول على طول و عرض الشاشة

لمعرفة قياسات الشاشة يمكنك استخدام الخاصية screen.height للحصول على طول الشاشة و الخاصية screen.width للحصول عرضها بالبكسل.

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

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك

var demo = document.getElementById('demo');

// w هنا قمنا بتخزين عرض الشاشة في المتغير

let w = screen.width;

// h هنا قمنا بتخزين طول الشاشة في المتغير

let h = screen.height;

// demo هنا قمنا بعرض قياسات الشاشة في العنصر الذي يمثله المتغير

demo.innerHTML = 'Width: ' + w + '<br>' + 'Height: ' + h;

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // w هنا قمنا بتخزين عرض الشاشة في المتغير let w = screen.width; // h هنا قمنا بتخزين طول الشاشة في المتغير let h = screen.height; // demo هنا قمنا بعرض قياسات الشاشة في العنصر الذي يمثله المتغير demo.innerHTML = 'Width: ' + w + '<br>' + 'Height: ' + h;

جرب الكود

الحصول على المساحة المتاحة في الشاشة

في حال كان يظهر في الشاشة شيء يقلل المساحة التي يمكن أن يظهر فيها المتصفح مثل شريط المهام ( Taskbar ) فإنك قادر أيضاً على معرفة كم هي المساحة المتوفرة من الشاشة.

لمعرفة المساحة المتوفرة فقط من الشاشة يمكنك استخدام الخاصية screen.availHeight للحصول على الطول المتاج و الخاصية screen.availWidth للحصول على العرض المتاح بالبكسل.

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

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك

var demo = document.getElementById('demo');

// w هنا قمنا بتخزين عرض الشاشة المتوفر في المتغير

let w = screen.availWidth;

// h هنا قمنا بتخزين طول الشاشة المتوفر في المتغير

let h = screen.availHeight;

// demo هنا قمنا بعرض قياسات الشاشة المتوفرة في العنصر الذي يمثله المتغير

demo.innerHTML = 'Available width: ' + w + '<br>' + 'Available height: ' + h;

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // w هنا قمنا بتخزين عرض الشاشة المتوفر في المتغير let w = screen.availWidth; // h هنا قمنا بتخزين طول الشاشة المتوفر في المتغير let h = screen.availHeight; // demo هنا قمنا بعرض قياسات الشاشة المتوفرة في العنصر الذي يمثله المتغير demo.innerHTML = 'Available width: ' + w + '<br>' + 'Available height: ' + h;

جرب الكود

الحصول على دقة ألوان الشاشة

دقة أو عمق اللون ( Color Depth ) يقصد بها كم بت مخصص لعرض اللون في كل بكسل في الشاشة، أي في كل نقطة فيها.
بشكل عام كلما ازداد عدد البتات كلما ازداد عدد الألوان التي يمكن للشاشة عرضها و إليك بعض الأمثلة:

إذا كان عمق اللون هو 8 بت، فعدد درجات الألوان الممكنة منه هو 2⁸ مما يعني أن الشاشة قادرة على عرض 256 لون مختلف.
إذا كان عمق اللون هو 16 بت، فعدد درجات الألوان الممكنة منه هو 2¹⁶ مما يعني أن الشاشة قادرة على عرض 65,536 لون مختلف.
إذا كان عمق اللون هو 24 بت، فعدد درجات الألوان الممكنة منه هو 2²⁴ مما يعني أن الشاشة قادرة على عرض 16,777,216 لون مختلف.
إذا كان عمق اللون هو 32 بت، فعدد درجات الألوان الممكنة منه هو 2³² مما يعني أن الشاشة قادرة على عرض 4,294,967,296 لون مختلف.

العمق اللوني في أغلب شاشات الحاسوب و الهاتف الحديثة هو 24 أو 32 بت.
نود الإشارة إلى أن الشاشات التي تدعم 32 بت هي فعلياً تخصص 24 بت لدرجة اللون و 8 بت لدرجة شفافية اللون.

يمكنك استخدام الخاصية screen.colorDepth لمعرفة كم هي دقة الألوان المعتمدة في الشاشة.

في المثال التالي قمنا بعرض دقة الألوان المعتمدة في الشاشة.

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك

var demo = document.getElementById('demo');

// demo هنا قمنا بعرض عدد البتات المخصصة لتحديد لون كل بكسل في الشاشة في العنصر الذي يمثله المتغير

demo.innerHTML = 'Your screen color depth is: ' + screen.colorDepth;

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // demo هنا قمنا بعرض عدد البتات المخصصة لتحديد لون كل بكسل في الشاشة في العنصر الذي يمثله المتغير demo.innerHTML = 'Your screen color depth is: ' + screen.colorDepth;

جرب الكود

الحصول على عدد البتات في كل بكسل في الشاشة

عدد بالبكسلات في الشاشة يمثل عدد النقاط الموجودة فيها، فكلما كبر عدد بكسلات الشاشة كلما كان حجمها أكبر.
كل بكسل موجود في الشاشة له دقة أو عمق ( Pixel Depth ) و نقصد بذلك أنه يتم تمثيله بعدد محدد من البتات.

قديماً كان عدد البتات في كل بكسل في الشاشة يختلف عن عدد البتات المخصص لعرض كل لون في البكسل.
في الشاشة الحديثة أصبحت أعداد البتات المتساوية مما يعني أن Color Depth بات يساوي Pixel Depth.

يمكنك استخدام الخاصية screen.pixelDepth لمعرفة كم هو عدد البتات المخصص لعرض كل بكسل في الشاشة.

في المثال التالي قمنا بعرض عدد البتات المخصصة لكل بكسل في الشاشة.

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك

var demo = document.getElementById('demo');

// demo هنا قمنا بعرض عدد البتات المخصصة لكل بكسل في الشاشة في العنصر الذي يمثله المتغير

demo.innerHTML = 'Your screen pixel depth is: ' + screen.pixelDepth;

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); // demo هنا قمنا بعرض عدد البتات المخصصة لكل بكسل في الشاشة في العنصر الذي يمثله المتغير demo.innerHTML = 'Your screen pixel depth is: ' + screen.pixelDepth;

جرب الكود

الحصول على إتجاه الشاشة

يمكنك استخدام الخاصية screen.orientation.type لمعرفة ما إن كانت الشاشة تظهر بشكلها الطبيعي أم أنها مقلوبة.

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

القيم المحتملة لهذه الخاصية يختلف معناها بحسب طبيعة الشاشة نفسها، هل هي شاشة بالأساس عرضها أكبر من طولها ( Landscape ) مثل شاشات الحاسوب، أما أنها شاشة بالأساس طولها أكبر من عرضها ( Portrait ) مثل شاشات الهاتف و التابلت.

إذا كان عرض الشاشة أكبر من طولها فإنها قد تعطينا القيم التالية:

'landscape-primary' _ تعني أن الشاشة نوعها Landscape و محتواها يظهر فيها بالعرض طبيعي.
'portrait-primary' _ تعني أن الشاشة نوعها Landscape لكنها مقلوبة 90 درجة مما يعني أنها تظهر بالطول.
'landscape-secondary' _ تعني أن الشاشة نوعها Landscape و لكنها مقلوبة 180 درجة مما يعني أنها تظهر بالعرض و لكنها مقلوبة رأساً على عقب.
'portrait-secondary' _ تعني أن الشاشة نوعها Landscape و لكنها مقلوبة 270 درجة مما يعني أنها تظهر بالطول و لكنها مقلوبة رأساً على عقب.

إذا كان طول الشاشة أكبر من عرضها فإن معنى القيم سيصبح كما يلي:

'portrait-primary' _ تعني أن الشاشة نوعها Portrait و محتواها يظهر فيها بالطول طبيعي.
'landscape-primary' _ تعني أن الشاشة نوعها Portrait و لكنها مقلوبة 90 درجة مما يعني أنها تظهر بالعرض.
'portrait-secondary' _ تعني أن الشاشة نوعها Portrait و لكنها مقلوبة 180 درجة مما يعني أنها تظهر بالطول و لكنها مقلوبة رأساً على عقب.
'landscape-secondary' _ تعني أن الشاشة نوعها Portrait و لكنها مقلوبة 270 درجة مما يعني أنها تظهر بالعرض و لكنها مقلوبة رأساً على عقب.

في المثال التالي قمنا بعرض إتجاه شاشة المستخدم.

مثال

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك

var demo = document.getElementById('demo');

if (screen.orientation.type == null) {

// demo مدعومة في المتصفح سيتم عرض هذه الراسلة في العنصر الذي يمثله المتغير orientation.type إذا لم تكن الخاصية

demo.innerHTML = 'The orientation API is not supported in this browser.';

}

else {

// demo مدعومة في المتصفح سيتم عرض إتجاه الشاشة في العنصر الذي يمثله المتغير orientation.type إذا كانت الخاصية

demo.innerHTML = 'Screen Orientation is: ' + screen.orientation.type;

}

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك var demo = document.getElementById('demo'); if (screen.orientation.type == null) { // demo مدعومة في المتصفح سيتم عرض هذه الراسلة في العنصر الذي يمثله المتغير orientation.type إذا لم تكن الخاصية demo.innerHTML = 'The orientation API is not supported in this browser.'; } else { // demo مدعومة في المتصفح سيتم عرض إتجاه الشاشة في العنصر الذي يمثله المتغير orientation.type إذا كانت الخاصية demo.innerHTML = 'Screen Orientation is: ' + screen.orientation.type; }

جرب الكود

الدرس التالي❯ ❮الدرس السابق

جافاسكربتخصائص الشاشة

ما هو الكائن screen؟

الحصول على طول و عرض الشاشة

مثال

الحصول على المساحة المتاحة في الشاشة

مثال

الحصول على دقة ألوان الشاشة

مثال

الحصول على عدد البتات في كل بكسل في الشاشة

مثال

الحصول على إتجاه الشاشة

مثال

هدف الموقع

روابط مهمة

حقوق النشر

الدورات

أدوات مساعدة

أقسام الموقع

إبحث