JS / خصائص الشاشة

الناشر :كودا فوكس -

خصائص الشاشة

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

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

JS - خصائص الشاشة


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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Get Screen Width And Height</h1>
    
    <p id="demo"></p>

    <script>
        // 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;
    </script>
</body>
</html>

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Get Screen Available Width And Height</h1>
    
    <p id="demo"></p>

    <script>
		// 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;
    </script>
</body>
</html>

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

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Get Screen Color Depth</h1>
    
    <p id="demo"></p>

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

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

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

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

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

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

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Get Screen Pixel Depth</h1>
    
    <p id="demo"></p>

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

		// demo هنا قمنا بعرض عدد البتات المخصصة لكل بكسل في الشاشة في العنصر الذي يمثله المتغير
		demo.innerHTML = 'Your screen pixel depth is: ' + screen.pixelDepth;
    </script>
</body>
</html>

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

يمكنك استخدام الخاصية 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 درجة مما يعني أنها تظهر بالعرض و لكنها مقلوبة رأساً على عقب.

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Get Screen Orientation</h1>
    
    <p id="demo"></p>

    <script>
        // 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;
		}
    </script>
</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال