Skip to content

JavaScript detects screen size responsive | Code

  • by

Simply use the width and height property of the window.screen object to get the resolution of the screen (i.e. width and height of the screen).

screen.width
screen.height

Bonus: Firefox now has “Responsive Design Mode” Which is the best for doing responsive testing that I’ve seen on any browser.

The shortcut is Cntrl+Shift+M and you’re in a fantastic mobile view with complete control over the size of the screen whilst still being able to open the dev tools.

JavaScript detects screen size responsively

A simple example code detects Screen Resolution.

<!DOCTYPE html>
<html>
<body>
  <script>
    function getResolution() {
      Console.log("Screen resolution is: " + screen.width + "x" + screen.height);
    }
  </script>

  <button type="button" onclick="getResolution();">Get Resolution</button>
</body>
</html>

Output:

JavaScript detects screen size responsive

Detect screen size change

window.onresize = function(){
console.log("resize");
}

JavaScript is easy to resize for screen size

This code allows for an Obj instance to run methods on – to call code when a screen change occurs.

//https://cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.6/enquire.min.js


class ScreenSize{

    addCSS(maxOrMin, screenSize, element, style, change){
     enquire.register("screen and ("+maxOrMin+"-width: "+screenSize+")", ()=>{    
       document.querySelector(element).style[style] = change;
    });
  }
}

You can also listen to resize events to update your layout dynamically. Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Screen Size Detection</title>
</head>
<body>
<script>
    function handleResize() {
        // Get the width and height of the window
        var width = window.innerWidth;
        var height = window.innerHeight;

        // Display the width and height
        console.log("Width: " + width + ", Height: " + height);

        // You can add your responsive logic here based on screen size
        if (width < 600) {
            console.log("Small screen");
        } else if (width >= 600 && width < 1200) {
            console.log("Medium screen");
        } else {
            console.log("Large screen");
        }
    }

    // Call handleResize initially
    handleResize();

    // Listen for resize events
    window.addEventListener('resize', handleResize);
</script>
</body>
</html>

In this example:

  1. The handleResize function gets the current width and height of the window using window.innerWidth and window.innerHeight.
  2. It then logs the width and height to the console for demonstration.
  3. You can add your responsive logic within this function to adjust your layout or perform other actions based on the screen size.
  4. The handleResize function is called initially to get the initial screen size, and then it’s attached as an event listener for the resize event, so it gets called whenever the window is resized.

You can customize the conditions inside the handleResize function according to your specific requirements for different screen sizes.

Do comment if you have any doubts or suggestions on this JS screen topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading