How to detect the screen resolution with JavaScript?

Javascript Web Development Object Oriented Programming

To detect the screen resolution, use the concept of window.screen.

For width, use the following −

window.screen.availWidth

For height −

window.screen.availHeight

Following is the code to detect the screen resolution −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
   console.log("Available Width="+window.screen.availWidth);
   console.log("Available Height="+window.screen.availHeight);
</script>
</body>
</html>

To run the above program, save the file name “anyName.html(index.html)” and right click on the file. Select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output −

AmitDiwan

Updated on: 11-Sep-2020

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started