خصائص الشاشة في لغة JavaScript
مرحباً يا بطل! اليوم راح نتكلم عن خصائص الشاشة (Screen Properties) في JavaScript. هذي الخصائص تعطيك معلومات عن شاشة المستخدم اللي قاعد يتصفح موقعك. لا تخلط بينها وبين خصائص النافذة (Window Properties) اللي تعطيك معلومات عن نافذة المتصفح نفسها.
كائن window.screen
كل الخصائص اللي بنتكلم عنها اليوم موجودة داخل كائن window.screen.
تقدر توصلها مباشرة عن طريق screen. لأن window هو الكائن العام (Global Object).
أهم الخصائص
1. screen.width و screen.height
هذي تعطيك العرض والارتفاع الكلي للشاشة بالبكسل. يعني لو شاشتك 1920x1080، راح تلاقي هذي القيم.
ملاحظة: هذي الأبعاد تشمل أي شريط مهام أو Dock موجود في نظام التشغيل.
console.log("عرض الشاشة الكلي:", screen.width);
console.log("ارتفاع الشاشة الكلي:", screen.height);2. screen.availWidth و screen.availHeight
هذي تعطيك العرض والارتفاع المتاحين للشاشة، يعني بعد ما نخصم أشرطة المهام أو أي عناصر دائمة في نظام التشغيل.
غالباً هذي تكون أقل من screen.width و screen.height.
console.log("العرض المتاح للشاشة:", screen.availWidth);
console.log("الارتفاع المتاح للشاشة:", screen.availHeight);3. screen.colorDepth و screen.pixelDepth
هذي تعطيك عدد البتات (bits) المستخدمة لكل بكسل لتمثيل اللون.
غالباً بتكون 24 (True Color) أو 32 (True Color مع قناة ألفا).
screen.pixelDepth هي نفسها screen.colorDepth في المتصفحات الحديثة.
console.log("عمق الألوان:", screen.colorDepth);
console.log("عمق البكسل:", screen.pixelDepth);4. screen.orientation
هذي الخاصية (وهي كائن بحد ذاتها) تعطيك معلومات عن اتجاه الشاشة (أفقي أو عمودي).
مفيدة جداً للأجهزة المحمولة.
تقدر توصل للنوع عن طريق screen.orientation.type وللزاوية عن طريق screen.orientation.angle.
console.log("نوع اتجاه الشاشة:", screen.orientation.type); // مثلاً: "landscape-primary" أو "portrait-secondary"
console.log("زاوية اتجاه الشاشة:", screen.orientation.angle); // مثلاً: 0, 90, 180, 270ملاحظة:
screen.orientationكائن، وله أيضاً حدثonchangeتقدر تستخدمه عشان تتفاعل مع تغيير اتجاه الشاشة.
متى نحتاج هذي الخصائص؟
-
تحليلات المستخدمين: عشان تعرف حجم الشاشات اللي يستخدمونها زوار موقعك.
-
التصميم المتجاوب (Responsive Design): ممكن تستخدمها في بعض الحالات المتقدمة، لكن عادةً تفضل استخدام خصائص النافذة (
window.innerWidth) لضبط التصميم. -
تطبيقات الويب المتقدمة: لتحديد المساحة القصوى المتاحة لتطبيقك.
الفرق بين screen و window
تذكر دائماً:
-
screen.*: تعطيك معلومات عن الشاشة الكلية اللي المستخدم شابك عليها. -
window.*(مثلwindow.innerWidth,window.innerHeight): تعطيك معلومات عن نافذة المتصفح الحالية. هذي هي اللي غالباً تحتاجها عشان تتحكم في تصميم موقعك.
وبس يا معلم! كذا تكون عرفت أهم خصائص الشاشة في JavaScript. طبقها وشوف النتائج بنفسك!