Jquery cambia la altura en función del tamaño / tamaño del navegador

Question

Me preguntaba si había una manera de determinar la altura / anchura de un navegador. Lo que estoy tratando de hacer es establecer una altura en un div a 500px cuando el tamaño del navegador es 1024x768, y para cualquier cosa menor me gustaría establecerlo en 400px.

Gracias de antemano

Answer 1

Si está utilizando jQuery 1.2 o más reciente, simplemente puede usar estos:

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

A partir de ahí, es simple decidir la altura de su elemento.

Answer 2

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

Las barras de desplazamiento, etc. tienen un efecto en el tamaño de la ventana, por lo que es posible que desee ajustar el tamaño deseado.

Answer 3

Basándose en la respuesta de Chad, también desea agregar esa función al evento de carga para asegurarse de que se redimensione cuando la página se cargue también.

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

¡Preste atención, hay un error con Jquery 1.8.0, $ (window) .height () devuelve la altura de todos los documentos!

Answer 5

Tengo la sensación de que el cheque debería ser diferente

nuevo: h < 768 || w < 1024