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

Question

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 fixer la hauteur d'un div à 500px lorsque la taille du navigateur est de 1024x768, et pour tout ce qui est inférieur, j'aimerais la fixer à 400px.

Merci d'avance

Answer 1

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 est facile de décider de la hauteur de votre élément.

Answer 2

$(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 les ajuster à la taille souhaitée.

Answer 3

Dans le prolongement de la réponse de Chad, vous devez également ajouter cette fonction à l'événement onload afin de vous assurer que la page est également redimensionnée lors de son chargement.

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);
}

Answer 4

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

Answer 5

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

nouveau : h < 768 || w < 1024