In this blog post, you will learn how to Detect screen resolution using JavaScript.
Detect screen resolution using JavaScript.
let’s learn this with code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h2>Your Screen Resolution is</h2>
<div id="resolution"></div>
<!-- script-->
<script>
let resolution=document.getElementById("resolution");
resolution.textContent=${window.screen.width} x ${window.screen.height};
</script>
</body>
</html>
1. First we are creating an html file showing the user’s screen resolution
2. The div element is used to show the resolution
3. JavaScript within the html is used to retrieve the container element and seta it’s text content to users screen width and height from the ‘window.screen’ object
4. The “${}” is used for string interpolation
5. This setup ensures that whenever the page is reloaded it will display the users screen Resolution immediately.