How to detect screen resolution using Javascript?

To detect the screen resolution (width and height) of the user’s display using JavaScript, you can use the screen object and its width and height properties.

Here is an example of how to use the screen object to detect the screen resolution:

const width = screen.width;
const height = screen.height;

console.log(`Your screen resolution is ${width} x ${height}.`);

This code gets the width and height properties of the screen object and logs the screen resolution to the console.

Keep in mind that the screen object represents the user’s physical screen, not the viewport of the web page. Therefore, the screen resolution may be different from the size of the browser window, especially if the user has a high-resolution display or has zoomed in or out.

To get the size of the browser window, you can use the innerWidth and innerHeight properties of the window object.

Here is an example of how to use the window object to get the size of the browser window:

const width = window.innerWidth;
const height = window.innerHeight;

console.log(`Your window size is ${width} x ${height}.`);