Jquery Zmień wysokość na podstawie rozmiaru / rozmiaru przeglądarki - javascript, jquery, browser, screen

Zastanawiałem się, czy istnieje sposób na ustaleniewysokość / szerokość przeglądarki. Co próbuję zrobić, to ustawić wysokość na div na 500px, gdy rozmiar przeglądarki wynosi 1024x768, a na cokolwiek niższego chciałbym ustawić ją na 400px.

Z góry dziękuję

Odpowiedzi:

Jeśli używasz jQuery 1.2 lub nowszego, możesz po prostu użyć tych:

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

Stąd łatwo jest ustalić wysokość swojego elementu.

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

Paski przewijania itp. Mają wpływ na rozmiar okna, więc możesz dostosować go do żądanego rozmiaru.

Opierając się na odpowiedzi Chada, chcesz także dodać tę funkcję do zdarzenia onload, aby mieć pewność, że zostanie ona zmieniona również podczas ładowania strony.

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

Zwróć uwagę, jest błąd z Jquery 1.8.0, $ (window) .height () zwraca wysokość wszystkich dokumentów!

Mam wrażenie, że czek powinien być inny

Nowy: h <768 || w <1024