Jquery Ändern Sie die Höhe basierend auf Browser-Größe/Resize

Question

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 zu 500px, wenn die Browsergröße 1024x768 ist, und für etwas niedriger würde ich gerne es auf 400px setzen.

Vielen Dank im Voraus

Answer 1

Wenn Sie jQuery 1.2 oder eine neuere Version verwenden, können Sie diese einfach benutzen:

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

Von dort aus ist es ein Leichtes, die Höhe Ihres Elements zu bestimmen.

Answer 2

$(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 Größe des Fensters aus, so dass Sie es möglicherweise auf die gewünschte Größe einstellen sollten.

Answer 3

Aufbauend auf Chad's Antwort, Sie wollen auch, dass die Funktion auf das onload-Ereignis hinzufügen, um sicherzustellen, dass es geändert wird, wenn die Seite lädt als gut.

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

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

Answer 5

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

neu: h < 768 || w < 1024