Lesson 3 - Browser BOM

3.2 JS Screen

The screen object provides information about the user's screen, which is useful for optimizing the layout of web pages based on screen size and resolution.

Here are some commonly used screen properties:

• screen.width and screen.height: Provides the width and height of the screen.

const screenWidth = screen.width;
const screenHeight = screen.height;
console.log(`Screen Width: ${screenWidth} & Height: ${screenHeight}`);

• screen.availWidth and screen.availHeight: Provides the available width and height of the screen (excluding system UI features like the taskbar).

const availWidth = screen.availWidth;
const availHeight = screen.availHeight;
console.log(`Available Width: ${availWidth} & Height: ${availHeight}`);

The following example demonstrates obtaining both full screen size and available screen size:

const screenWidth = screen.width;
const screenHeight = screen.height;
const availWidth = screen.availWidth;
const availHeight = screen.availHeight;
console.log(`Full Screen Width: ${screenWidth} & Available Screen Width: ${availWidth}`);
console.log(`Full Screen Height: ${screenHeight} & Available Screen Height: ${availHeight}`);

These examples illustrate how to use screen object properties in JavaScript to retrieve information about the user's screen dimensions and available space, which can be crucial for responsive web design and application layout optimization.