Cambiar la altura en función del tamaño/redimensionamiento del navegador

3 minutos de lectura

Avatar de usuario de AlteredConcept
AlteradoConcepto

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

  • Tenga en cuenta que el tamaño especificado aquí (1024×768) parece una resolución de pantalla en lugar de un tamaño de navegador. Creo que si está pensando en comprobar un navegador, entonces debería usar un tamaño algo pequeño, como 1000×700, para tener en cuenta los bordes, el menú, las barras de herramientas y la barra de estado.

    – Alexis Wilke

    2 de julio de 2012 a las 1:40

Avatar de usuario de TM.
TM.

Si está utilizando jQuery 1.2 o posterior, simplemente puede usar estos:

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

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

  • $(document).height() es muy poco confiable, lo que resulta en un valor más bajo para un navegador de pantalla completa que en uno que es CASI pantalla completa. $(window).height() y width() parecen ser más seguros. En cualquier caso, probablemente esté más interesado en intención que en un valor exacto, por lo que agregar un búfer razonable para tener en cuenta la diferencia entre $(window).height y el tamaño exterior de la ventana del navegador puede ser lo que desee.

    –Oskar Austegard

    21 de enero de 2010 a las 23:35

  • Gracias por mencionar el número de versión de jQuery. Estaba trabajando en un archivo que usaba una versión anterior y seguía recibiendo “e.style is undefined” en FireBug cuando traté de obtener $(window).width. Tal vez la próxima persona que busque ese error en Google encuentre esta respuesta. 🙂

    – Nathan largo

    12 de julio de 2010 a las 21:10

  • ¿Hay alguna ventaja usando esto sobre window.resizeTo(w,h) ??

    – Xitcod13

    12 mayo 2012 a las 20:57

Avatar de usuario de Chad Grant
beca chad

$(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 modificar el tamaño deseado.

  • ¿No tienes el (h

    – Mikezx6r

    11 de abril de 2010 a las 1:14

Avatar de usuario de Jeroen Ritmeijer
Jeroen Ritmeijer

Sobre la base de la respuesta de Chad, también desea agregar esa función al evento de carga para asegurarse de que se cambie de tamaño cuando la página también se carga.

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

  • o las dos líneas superiores podrían escribirse como una… $(ventana).resize(resizeFrame).resize();

    –Oskar Austegard

    21 de enero de 2010 a las 23:36

Preste atención, hay un error con Jquery 1.8.0, $(window).height() devuelve la altura de todo el documento.

Tengo la sensación de que el cheque debe ser diferente.

nuevo: h

¿Ha sido útil esta solución?