web-dev-qa-db-fra.com

Jquery Changer la hauteur en fonction de la taille / redimensionnement du navigateur

Je me demandais s'il y avait un moyen de déterminer la hauteur/largeur d'un navigateur. Ce que j'essaie de faire, c'est de définir une hauteur sur un div à 500px lorsque la taille du navigateur est de 1024x768, et pour tout ce qui est inférieur, je voudrais le fixer à 400px.

Merci d'avance

javascriptjquerybrowserscreen
42
AlteredConcept

Si vous utilisez jQuery 1.2 ou une version plus récente, vous pouvez simplement les utiliser:

$(window).width();
$(document).width();
$(window).height();
$(document).height();

À partir de là, il suffit de décider de la hauteur de votre élément.

68
TM.
$(function(){
    $(window).resize(function(){
        var h = $(window).height();
        var w = $(window).width();
        $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
    });
});

Les barres de défilement, etc. ont un effet sur la taille de la fenêtre, vous pouvez donc ajuster la taille souhaitée.

47
Chad Grant

En vous basant sur la réponse de Chad, vous souhaitez également ajouter cette fonction à l'événement onload pour vous assurer qu'elle est redimensionnée également lors du chargement de la page.

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);

function resizeFrame() 
{
    var h = $(window).height();
    var w = $(window).width();
    $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
}
25
Jeroen Ritmeijer

Faites attention, il y a un bug avec Jquery 1.8.0, $ (window) .height () retourne la hauteur de tout le document!

4
Thomas Decaux

J'ai l'impression que le chèque doit être différent

nouveau: h <768 || w <1024

2
Svetoslav Marinov