JS Screen

Key Concepts:

• Screen Object: Represents the user's screen.
• Screen Resolution: Width and height of the screen in pixels.
• Screen Properties: Properties like width, height, pixelDepth, and more.
• Screen Capabilities: Availability of features like touch input, pixel ratio.
• Touch Input: Support for touch events on the screen.

Practical Steps:

1. Access the screen Object:

   const screenObj = window.screen;
   

2. Get Screen Resolution:

   console.log("Resolution: " + screenObj.width + " x " + screenObj.height);
   

3. Check Screen Properties:

   console.log("Pixel Depth: " + screenObj.pixelDepth);
   console.log("Has Touch: " + ("ontouchstart" in window));
   

4. Detect Touch Input Support:

   if (screenObj.touchSupport) {
     console.log("Touch input supported");
   } else {
     console.log("Touch input not supported");
   }
   

Example:

// Get screen properties and display them
const screenObj = window.screen;
const resolution = screenObj.width + " x " + screenObj.height;
const pixelDepth = screenObj.pixelDepth;
const hasTouch = ("ontouchstart" in window);

console.log("Screen Properties:");
console.log("Resolution: ", resolution);
console.log("Pixel Depth: ", pixelDepth);
console.log("Has Touch: ", hasTouch);