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

Gracias de antemano

  • Tenga en cuenta que el tamaño especificado aquí (1024×768) suena como una resolución de pantalla en lugar de un tamaño del navegador. Yo pienso que si usted está pensando a comprobar un navegador, a continuación, usted debe utilizar un poco de pequeño tamaño tales como 1000×700 para dar cuenta de las fronteras, de menú, barras de herramientas y barra de estado.

5 Comentarios

  1. 68

    Si usted está usando jQuery 1.2 o posterior, usted puede simplemente utilizar estos:

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

    Partir de ahí es un asunto sencillo para decidir la altura de su elemento.

    • Gracias voy a intentarlo.
    • $(document).la altura (a) está muy poco fiables, lo que resulta en un valor más bajo para una protegida completo navegador que en uno que está CASI a pantalla completa. $(window).la altura (a) y el ancho() parecen estar más seguros. En cualquier caso, usted está probablemente más interesados en intento que en un valor exacto, por lo que agregar un buffer de tamaño razonable para dar cuenta de la diferencia entre $(window).la altura y el tamaño exterior de la ventana del navegador puede ser lo que usted desea.
    • Gracias por mencionar la versión de jQuery número. Yo estaba trabajando en un archivo que utiliza una versión anterior y seguía recibiendo «e.el estilo no está definido» en FireBug cuando traté de hacer $(window).la anchura. Tal vez la próxima persona que Googles de error que se va a encontrar esta respuesta. 🙂
    • api.jquery.com/height
    • hay alguna ventaja de usar esta encima de la ventana.resizeTo( w,h ) ??
  2. 47
    $(function(){
        $(window).resize(function(){
            var h = $(window).height();
            var w = $(window).width();
            $("#elementToResize").css('height',(h < 768 || w < 1024) ? 500 : 400);
        });
    });

    Barras de desplazamiento, etc tienen un efecto sobre el tamaño de la ventana si lo desea, puede ajustar al tamaño deseado.

    • No tiene el (h < 1024 || w < 768) ? 500 : 400 hacia atrás? Creo que la pregunta era para tenerlo 400 para los más pequeños de 1024×768. También, como otro cartel menciona, la comprobación de la altura y la anchura en contra de los valores equivocados. Así, s/b .css(‘altura’, (h < 768 || w < 1024) ? 400 : 500);
    • He editado la respuesta 😉
  3. 25

    Edificio en Chad respuesta, también quiero añadir que la función para el evento onload para asegurarse de que cambia de tamaño cuando se carga la página así.

    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 de arriba podría ser escrito como una… $(window).cambiar el tamaño(resizeFrame).resize();

Dejar respuesta

Please enter your comment!
Please enter your name here