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>