Ändern Sie die Höhe basierend auf der Browsergröße/Größenänderung

Lesezeit: 3 Minuten

Benutzeravatar von AlteredConcept
Verändertes Konzept

Ich habe mich gefragt, ob es eine Möglichkeit gibt, die Höhe/Breite eines Browsers zu bestimmen. Was ich versuche, ist, eine Höhe für ein div auf 500 Pixel festzulegen, wenn die Browsergröße 1024 x 768 beträgt, und für alles, was niedriger ist, möchte ich sie auf 400 Pixel festlegen.

  • Beachten Sie, dass die hier angegebene Größe (1024 x 768) eher nach einer Bildschirmauflösung als nach einer Browsergröße klingt. Ich würde denken, dass Sie, wenn Sie daran denken, einen Browser zu überprüfen, eine etwas kleine Größe wie 1000 x 700 verwenden sollten, um die Ränder, das Menü, die Symbolleisten und die Statusleiste zu berücksichtigen.

    – Alexis Wilke

    2. Juli 2012 um 1:40 Uhr

Benutzeravatar von TM
TM.

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

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

Von dort aus ist es eine einfache Sache, die Höhe Ihres Elements zu bestimmen.

  • $(document).height() ist ernsthaft unzuverlässig, was zu einem niedrigeren Wert für einen Vollbild-Browser führt als für einen, der FAST Vollbild ist. $(window).height() und width() scheinen sicherer zu sein. In jedem Fall interessiert Sie wahrscheinlich mehr Absicht als in einem exakten Wert, so dass Sie einen angemessenen Puffer hinzufügen müssen, um den Unterschied zwischen $(window).height und der äußeren Größe des Browserfensters auszugleichen.

    – Oskar Austegard

    21. Januar 2010 um 23:35 Uhr

  • Vielen Dank für die Angabe der jQuery-Versionsnummer. Ich habe an einer Datei gearbeitet, die eine ältere Version verwendet hat und in FireBug immer wieder “e.style is undefined” erhalten hat, als ich versucht habe, $(window).width zu bekommen. Vielleicht findet die nächste Person, die diesen Fehler googelt, diese Antwort. 🙂

    – Nathan Lange

    12. Juli 2010 um 21:10 Uhr

  • Gibt es einen Vorteil gegenüber window.resizeTo( w, h ) ?

    – Xitcod13

    12. Mai 2012 um 20:57 Uhr

Benutzeravatar von Chad Grant
Chad Grant

$(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 sie möglicherweise auf die gewünschte Größe anpassen möchten.

  • Hast du nicht die (h < 1024 || w < 768) ? 500 : 400 rückwärts? Ich glaube, die Frage war, es 400 für kleiner als 1024x768 zu haben. Wie ein anderer Poster erwähnt, überprüfen Sie auch Höhe und Breite auf falsche Werte. Also, s/b .css('Höhe', (h < 768 || w < 1024) ? 400 : 500);

    – Mikezx6r

    11. April 2010 um 1:14 Uhr

Benutzeravatar von Jeroen Ritmeijer
Jeroen Ritmeijer

Aufbauend auf der Antwort von Chad möchten Sie diese Funktion auch zum onload-Ereignis hinzufügen, um sicherzustellen, dass die Größe auch beim Laden der Seite 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);
}

  • oder die oberen zwei Zeilen könnten als eine geschrieben werden… $(window).resize(resizeFrame).resize();

    – Oskar Austegard

    21. Januar 2010 um 23:36 Uhr

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

Ich habe das Gefühl, dass die Überprüfung anders sein sollte

neu: h < 768 || w < 1024

1438240cookie-checkÄndern Sie die Höhe basierend auf der Browsergröße/Größenänderung

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy