JavaScript onresize events

The onresize event is triggered every time a user changes the browser window size. This event is particularly useful in developing responsive websites where we want to dynamically adjust content based on screen size. It can be used to change element layouts, adjust image sizes, or modify CSS styles according to the current window dimensions.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onresize event</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <style>
        .info-box {
            padding: 15px;
            margin: 20px 0;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .size-display {
            font-weight: bold;
        }
    </style>
</head>
<body onresize="updateSize()">
    <div class="info-box">
        <p id="instruction">Resize the browser window to see dimension changes:</p>
        <div id="size" class="size-display"></div>
    </div>

    <div class="info-box">
        <p>Additional information:</p>
        <div id="additional"></div>
    </div>

<script>
    function updateSize() {
        let width = window.outerWidth;
        let height = window.outerHeight;
        let innerWidth = window.innerWidth;
        let innerHeight = window.innerHeight;

        document.getElementById("size").innerHTML =
            "Outer window size:<br>" +
            "Width: " + width + "px<br>" +
            "Height: " + height + "px";

        document.getElementById("additional").innerHTML =
            "Inner window size:<br>" +
            "Width: " + innerWidth + "px<br>" +
            "Height: " + innerHeight + "px";

        // Display screen size category
        let category = "";
        if (innerWidth < 600) {
            category = "Mobile device";
        } else if (innerWidth < 1024) {
            category = "Tablet";
        } else {
            category = "Desktop";
        }
        document.getElementById("additional").innerHTML += "<br><br>Device category: " + category;
    }

    // Initial size display
    updateSize();
</script>
</body>
</html>

RESULT