Wymiary ekranu i okna w javascript

Pełne wymiary ekranu możemy pobrać za pomocą metody screen.width i screen. height. Wymiary monitora bez paska narzędzi pobieramy za pomocą metod screen.availWidth i screen.availHeight

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script> 
    function init(){
        var panel = document.getElementById("panel");
        var szerokosc, wysokosc, dostSzerokosc, dostWysokosc;
        szerokosc = screen.width;
        wysokosc = screen.height;
        dostSzerokosc = screen.availWidth;
        dostWysokosc = screen.availHeight;
        panel.innerHTML = "Rozdzielczosc: " + szerokosc + " x " + wysokosc + "<br>";
        panel.innerHTML += "Dostepna powierzchnia: " + dostSzerokosc + " x " + dostWysokosc;
    }
    document.addEventListener("DOMContentLoaded",init,false);
</script> 
<body>
    <div id="panel"></div> 
</body>    
</html>

Wymiary okna przeglądarki

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script> 
    function init(){
        var panel = document.getElementById("panel");
        var szerokoscOkna, wysokoscOkna;
        var szerokoscClient, wysokoscClient;
        szerokoscOkna = innerWidth;
        wysokoscOkna = innerHeight;
        szerokoscClient = document.documentElement.clientWidth;
        wysokoscClient = document.documentElement.clientHeight;
        panel.innerHTML += "Wymiar okna: " + szerokoscOkna + " x " + wysokoscOkna + "<br>";
        panel.innerHTML += "Wymiar okna client: " + szerokoscClient + " x " + wysokoscClient;
    }
    document.addEventListener("DOMContentLoaded",init,false);
</script> 
<body>
    <div id="panel"></div> 
</body>    
</html>

Zamykanie obecnego lub otwieranie nowego okna

Za pomocą metody window.open() możemy otworzyć nowe okno przeglądarki, a za pomocą window.close() możemy zamknąć aktualne okno.

<!DOCTYPE html>
<html lang="pl">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script> 
    function openNewWindow(){
        window.open(); 
    }
</script> 
<body>
    <button id="panel" onclick="openNewWindow()">Click me</button> 
</body>    
</html>
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Scroll to Top