web-dev-qa-db-fra.com

Taille du navigateur Live Detect - jQuery / JavaScript

Existe-t-il un plugin jQuery ou un moyen utilisant directement JavaScript pour détecter la taille du navigateur.

Je préférerais que les résultats soient "en direct", donc si la largeur ou la hauteur change, les résultats le seront aussi.

javascriptjquerybrowser
20
user1658756

JavaScript 

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

jQuery 

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

démo jsfiddle

Modifier: Mise à jour du code JavaScript pour prendre en charge IE8 et versions antérieures.

59
Matt Coughlin

vous pouvez utiliser

function onresize (){
   var h = $(window).height(), w= $(window).width();
   $('#resultboxid').html('height= ' + h + ' width: ' w);
}
 $(window).resize(onresize ); 

 onresize ();// first time;

html:

<span id=resultboxid></span>
6
Anoop

Cela devrait renvoyer la zone visible:

document.body.offsetWidth
document.body.offsetHeight

Je suppose que c'est toujours égal à la taille du navigateur?

3
Marcus Johansson

utilisez la variable de largeur et de hauteur où vous le souhaitez ... chaque fois que la taille du navigateur change, la valeur de la variable change également.

$(window).resize(function() {
    width = $(this).width());
    height = $(this).height());
});
2
Ritesh Chandora

Voulez-vous dire quelque chose comme ça window.innerHeight; window.innerWidth$(window).height(); $(window).width()

0
Anton

Vous pouvez essayer d'ajouter un écouteur d'événements lors du redimensionnement comme

window.addEventListener('resize',CheckBrowserSize,false);
function CheckBrowserSize() 
{
    var ResX= document.body.offsetHeight;
    var ResY= document.body.offsetWidth;
}
0
Milind Thakkar