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
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.
$(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.
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);
}
Achtung, es gibt einen Fehler in Jquery 1.8.0, $ (window) .height () gibt die gesamte Dokumenthöhe zurück!
Ich habe das Gefühl, dass der Scheck anders sein sollte
neu: h <768 || w <1024