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

ما هو الكائن 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;

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

في حال كان يظهر في الشاشة شيء يقلل المساحة التي يمكن أن يظهر فيها المتصفح مثل شريط المهام ( 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;

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

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

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

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

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

// demo في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
var demo = document.getElementById('demo');

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

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

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

يمكنك استخدام الخاصية 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;
}