Screen Updated!

JavaScript Window Screen Properties

Complete guide to accessing and utilizing screen information

Screen Properties Overview

📱
Screen Width & Height
-
Total physical screen dimensions in pixels. screen.width × screen.height
🖥️
Available Screen
-
Screen space available for applications (excluding OS UI). screen.availWidth × screen.availHeight
🎨
Color Depth
-
Number of bits used to represent colors. screen.colorDepth
🖼️
Pixel Depth
-
Bits per pixel of the screen. screen.pixelDepth
📐
Device Pixel Ratio
-
Ratio of physical to CSS pixels. window.devicePixelRatio
🔄
Orientation
-
Current screen orientation. screen.orientation.type

Screen Visualization

Physical Screen vs Available Space

Total Screen: -
Available: -
Taskbar/UI Space

Technical Details & Code Examples

Understanding Screen Properties

screen.width/height: The total physical dimensions of the user's screen in pixels.

screen.availWidth/availHeight: The screen dimensions available for your web application (excluding operating system interfaces like taskbars).

screen.colorDepth: The number of bits used to represent the color of a single pixel.

screen.pixelDepth: The color resolution in bits per pixel (usually same as colorDepth).

// Accessing Screen Properties
const screenInfo = {
  width: screen.width,
  height: screen.height,
  availWidth: screen.availWidth,
  availHeight: screen.availHeight,
  colorDepth: screen.colorDepth,
  pixelDepth: screen.pixelDepth,
  pixelRatio: window.devicePixelRatio
};

// Practical Usage Examples
if (screen.availWidth < 768) {
  // Load mobile-optimized layout
  loadMobileLayout();
}

if (screen.colorDepth < 24) {
  // Use limited color palette
  useBasicColors();
}

// High-DPI screen detection
if (window.devicePixelRatio > 1) {
  // Load high-resolution images
  loadRetinaImages();
}
Property Description Typical Values Use Case
screen.width Total screen width in pixels 1920, 1366, 1440, etc. Responsive design planning
screen.height Total screen height in pixels 1080, 768, 900, etc. Full-screen applications
screen.availWidth Available screen width ~1920 (minus taskbar) Window sizing
screen.availHeight Available screen height ~1040 (minus taskbar) Popup positioning
screen.colorDepth Color bit depth 24, 30, 32 Image optimization
screen.pixelDepth Bits per pixel 24, 30, 32 Graphics optimization