JavaScript onresize dogodki

Dogodek onresize se sproži vsakič, ko uporabnik spremeni velikost okna brskalnika. Ta dogodek je posebej koristen pri razvoju odzivnih spletnih strani, kjer želimo dinamično prilagajati vsebino glede na velikost zaslona. Lahko ga uporabimo za spreminjanje postavitve elementov, prilagajanje velikosti slik ali spreminjanje stilov CSS glede na trenutne dimenzije okna.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>onresize dogodek</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="spremeniVelikost()">
    <div class="info-box">
        <p id="navodilo">Spremeni velikost okna brskalnika, da vidiš spremembe dimenzij:</p>
        <div id="velikost" class="size-display"></div>
    </div>

    <div class="info-box">
        <p>Dodatne informacije:</p>
        <div id="dodatno"></div>
    </div>

<script>
    function spremeniVelikost() {
        let sirina = window.outerWidth;
        let visina = window.outerHeight;
        let notranjaSirina = window.innerWidth;
        let notranjaVisina = window.innerHeight;

        document.getElementById("velikost").innerHTML =
            "Zunanja velikost okna:<br>" +
            "Širina: " + sirina + "px<br>" +
            "Višina: " + visina + "px";

        document.getElementById("dodatno").innerHTML =
            "Notranja velikost okna:<br>" +
            "Širina: " + notranjaSirina + "px<br>" +
            "Višina: " + notranjaVisina + "px";

        // Prikaz kategorije velikosti zaslona
        let kategorija = "";
        if (notranjaSirina < 600) {
            kategorija = "Mobilna naprava";
        } else if (notranjaSirina < 1024) {
            kategorija = "Tablični računalnik";
        } else {
            kategorija = "Namizni računalnik";
        }
        document.getElementById("dodatno").innerHTML += "<br><br>Kategorija naprave: " + kategorija;
    }

    // Začetni prikaz velikosti
    spremeniVelikost();
</script>
</body>
</html>

REZULTAT