web-dev-qa-db-ger.com

JQuery-Änderungshöhe basierend auf Browsergröße / -größe

Ich habe mich gefragt, ob es eine Möglichkeit gibt, die Höhe/Breite eines Browsers zu bestimmen. Was ich versuche zu tun, ist, eine Höhe auf einem Div auf 500px einzustellen, wenn die Browsergröße 1024x768 ist, und für alles, was niedriger ist, möchte ich es auf 400px einstellen.

Danke im Voraus

42
AlteredConcept

Wenn Sie jQuery 1.2 oder neuer verwenden, können Sie einfach Folgendes verwenden:

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

Von dort aus ist es ganz einfach, die Höhe Ihres Elements zu bestimmen.

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

Bildlaufleisten usw. wirken sich auf die Fenstergröße aus, sodass Sie möglicherweise die gewünschte Größe einstellen möchten.

47
Chad Grant

Aufbauend auf der Antwort von Chad möchten Sie diese Funktion auch zum Onload-Ereignis hinzufügen, um sicherzustellen, dass die Größe der Seite beim Laden ebenfalls geändert wird.

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

Achtung, es gibt einen Fehler in Jquery 1.8.0, $ (window) .height () gibt die gesamte Dokumenthöhe zurück!

4
Thomas Decaux

Ich habe das Gefühl, dass der Scheck anders sein sollte

neu: h <768 || w <1024

2