Jak uzyskać rozmiary okna w JavaScript

By /

JavaScript

W programowaniu webowym, szczególnie podczas tworzenia responsywnych interfejsów użytkownika, często pojawia się potrzeba uzyskania aktualnych rozmiarów okna przeglądarki. Pozwala to na odpowiednie dostosowanie zawartości strony do rozmiaru okna, co jest kluczowe dla zapewnienia dobrej użyteczności i estetyki strony. JavaScript oferuje kilka sposobów na uzyskanie tych wymiarów.

Przykład kodu

Poniższy przykład ilustruje, jak można uzyskać szerokość i wysokość okna przeglądarki za pomocą JavaScript, oraz jak wyświetlić te informacje na stronie HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Rozmiary Okna</title>
</head>
<body>

<h2>Rozmiary Okna Przeglądarki</h2>
<p id="windowSize">Czekaj na rozmiar...</p>

<script>
    // Funkcja do wyświetlenia rozmiarów okna
    function displayWindowSize() {
        // Uzyskanie szerokości i wysokości okna
        let width = window.innerWidth;
        let height = window.innerHeight;

        // Wyświetlenie rozmiarów okna
        document.getElementById('windowSize').textContent =
            'Szerokość: ' + width + ', Wysokość: ' + height;
    }

    // Wywołanie funkcji po załadowaniu strony
    window.onload = displayWindowSize;

    // Wywołanie funkcji przy zmianie rozmiaru okna
    window.onresize = displayWindowSize;
</script>

</body>
</html>

 

Opis działania

  • window.innerWidth i window.innerHeight: Te dwie właściwości są używane do uzyskania szerokości i wysokości okna przeglądarki w pikselach. innerWidth zwraca szerokość okna włącznie z paskiem przewijania (jeśli jest obecny), a innerHeight zwraca wysokość okna.
  • document.getElementById('windowSize').textContent: Ta linia kodu służy do ustawienia tekstu elementu HTML o identyfikatorze windowSize. W tym przypadku wyświetlane są uzyskane wymiary okna.
  • Wywołania funkcji displayWindowSize: Funkcja displayWindowSize jest wywoływana dwa razy – raz po załadowaniu strony (window.onload) i ponownie za każdym razem, gdy rozmiar okna przeglądarki się zmienia (window.onresize). Dzięki temu informacje o rozmiarze okna są zawsze aktualne.

Podsumowanie

Uzyskanie i wyświetlenie rozmiarów okna przeglądarki w JavaScript jest prostym zadaniem, które może znacząco przyczynić się do poprawy interakcji użytkownika ze stroną. W powyższym przykładzie pokazano, jak można to zrobić w praktyczny sposób, wykorzystując właściwości window.innerWidth i window.innerHeight oraz obsługę zdarzeń onload i onresize. Dzięki tym technikom, deweloperzy mogą łatwo dostosować zawartość strony do rozmiaru okna przeglądarki, co jest szczególnie ważne w projektowaniu responsywnych interfejsów użytkownika.

 

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top