Trovare le dimensioni dello schermo con Javascript

Trovare le dimensioni dello schermo con Javascript

Vi propongo due funzioncine per identificare le dimensioni dello schermo e la risoluzione con Javascript:

  • risoluzioneVideo identifica la risoluzione di tutto il monitor, a prescindere dalla dimensione del browser
  • dimensioneFinestra identifica la grandezza del browser; in questo caso ho usato jQuery

Nella pagina ho impostato questo:

    $(function () {
        risoluzioneVideo();
        dimensioneFinestra();
        $(window).resize(function () {
            dimensioneFinestra();
        });
    });

In questo modo possiamo calcolare la nuova dimensione quando ridimensioniamo il browser.

La stessa cosa non vale ovviamente per la risoluzione del video.

Ecco le due funzioni:

function risoluzioneVideo() {
    var risWidth = screen.width;
    var risHeight = screen.height;
    $('#risoluzione_video').html('<span>' + risWidth + '</span> x <span>' + risHeight + '</span> pixel');
}

function dimensioneFinestra() {
    var winWidth = $(window).width();
    var winHeight = $(window).height();
    $('#dimensione_finestra').html('<span>' + winWidth + '</span> x <span>' + winHeight + '</span> pixel');
}

Vi basta mettere due div, o qualsiasi componente vogliate, per visualizzare il tutto nella pagina.

Il risultato lo potete vedere anche nella sezione Strumenti.

Enjoy!