شیء window.screen بخشی از BOM (Browser Object Model) است که اطلاعات مربوط به نمایشگر (Screen) کاربر را در اختیار ما قرار می‌دهد.

🔹 1. ویژگی‌های مهم screen

🟢 screen.width و screen.height

• ابعاد کل نمایشگر (بر حسب پیکسل)

console.log(screen.width);   // عرض نمایشگر
console.log(screen.height);  // ارتفاع نمایشگر

🟢 screen.availWidth و screen.availHeight

• ابعاد قابل استفاده نمایشگر (بدون در نظر گرفتن نوار وظیفه و اجزای رزرو شده سیستم عامل)

console.log(screen.availWidth);   // عرض قابل استفاده
console.log(screen.availHeight);  // ارتفاع قابل استفاده

🟢 screen.colorDepth

• عمق رنگ (تعداد بیت‌ها برای نمایش رنگ‌ها)

console.log(screen.colorDepth); // معمولا 24 یا 32

🟢 screen.pixelDepth

• عمق پیکسل (تقریباً مشابه colorDepth در بیشتر مرورگرها)

console.log(screen.pixelDepth);

🔹 2. کاربردها

• طراحی واکنش‌گرا (Responsive Design): تعیین سایز صفحه و تنظیم المان‌ها

• تشخیص کیفیت نمایشگر: بررسی عمق رنگ برای رندر گرافیک

• بهینه‌سازی رابط کاربری: تعیین رزولوشن برای بازی‌ها یا برنامه‌های تحت وب

🔹 3. مثال کامل

console.log("عرض کل نمایشگر: " + screen.width);
console.log("ارتفاع کل نمایشگر: " + screen.height);

console.log("عرض قابل استفاده: " + screen.availWidth);
console.log("ارتفاع قابل استفاده: " + screen.availHeight);

console.log("عمق رنگ: " + screen.colorDepth);
console.log("عمق پیکسل: " + screen.pixelDepth);

✅ خلاصه

• screen.width / screen.height → اندازه کل نمایشگر

• screen.availWidth / screen.availHeight → اندازه قابل استفاده

• screen.colorDepth → عمق رنگ (تعداد بیت‌ها برای رنگ)

• screen.pixelDepth → عمق پیکسل