Altezza modifica jquery in base alle dimensioni / ridimensionamento del browser

Question

Mi chiedevo se ci fosse un modo per determinare l'altezza / larghezza di un browser. Quello che sto cercando di fare è impostare un'altezza su un div su 500px quando la dimensione del browser è 1024x768 e per qualsiasi cosa inferiore vorrei impostarlo su 400px.

Grazie in anticipo

Answer 1

Se si utilizza jQuery 1.2 o versione successiva, è possibile utilizzare semplicemente questi:

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

Da lì è semplice decidere l'altezza del tuo elemento.

Answer 2

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

Le barre di scorrimento ecc hanno un effetto sulla dimensione della finestra, quindi potresti voler modificare la dimensione desiderata.

Answer 3

Basandoti sulla risposta di Chad, vuoi anche aggiungere quella funzione all'evento onload per assicurarti che venga ridimensionata quando si carica anche la pagina.

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

Fai attenzione, c'è un bug con Jquery 1.8.0, $ (window) .height () restituisce l'altezza di tutto il documento!

Answer 5

Ho la sensazione che il controllo dovrebbe essere diverso

Nuovo: h < 768 || w < 1024