How to detect the screen resolution with JavaScript?

JavascriptWeb DevelopmentObject 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 −


raja
Published on 11-Sep-2020 10:00:08
Advertisements