Utilizzo di jQuery per ottenere le dimensioni di Viewport


308

Come posso usare jQuery per determinare la dimensione del viewport del browser e per rileggerlo se la pagina viene ridimensionata? Ho bisogno di fare una dimensione IFRAME in questo spazio (arrivando un po 'su ogni margine).

Per chi non lo sapesse, la finestra del browser non ha le dimensioni del documento / della pagina. È la dimensione visibile della finestra prima dello scorrimento.


Qualche idea su come ottenere l'area visibile sullo schermo dei dispositivi, non solo su cosa può scorrere? Vedo $ (finestra) .height () che restituisce l'intera larghezza del documento, non la porzione su cui viene ingrandito. Voglio sapere quanto è visibile dopo aver applicato lo zoom.
Frank Schwieterman,

appelsiini.net/projects/viewport Questo dovrebbe farlo! :)
Mackelito

1
Questa non è una risposta diretta alla domanda, ma può essere utile per coloro che vogliono manipolare i selettori in base alla loro posizione e visibilità rispetto al viewport: appelsiini.net/projects/viewport (plugin)
Wallace Sidhrée

Risposte:


484

Per ottenere la larghezza e l'altezza della finestra:

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

ridimensionare l'evento della pagina:

$(window).resize(function() {

});

18
Ho provato questo su Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 e Safari 5.0 (7533.16). Questo funziona costantemente su tutti questi. Ho anche testato FF3.6.3 su Ubuntu e funziona anche lì. Penso che sto usando jQuery 1.3 con WordPress 2.9.2, che è dove avevo bisogno che funzionasse.
Volomike,

48
Qualche idea su come ottenere l'area visibile sullo schermo dei dispositivi, non solo su cosa può scorrere? Vedo $ (finestra) .height () che restituisce l'intera larghezza del documento, non la porzione su cui viene ingrandito. Voglio sapere quanto è visibile dopo aver applicato lo zoom.
Frank Schwieterman,

9
In realtà, innerWidth/ innerHeightè più corretto da usare (coprendo lo zoom).

18
@FrankSchwieterman Forse il tuo browser non si comporta nel modo in cui lo desideri: forse stai riscontrando questo problema: stackoverflow.com/q/12103208/923560 . Assicurati che il tuo file HTML includa una DOCTYPEdichiarazione adeguata , ad es <!DOCTYPE html>.
Abdull,

21
Questo è completamente sbagliato. Questo ti dà la dimensione del documento, non la finestra (la dimensione della finestra sul documento).
Mike Bethany,


26

1. Risposta alla domanda principale

Il copione $(window).height() funziona bene (mostra l'altezza del viewport e non il documento con altezza di scorrimento), ma deve inserire correttamente il tag doctype nel documento, ad esempio questi doctypes:

Per HTML 5:

<!DOCTYPE html>

Per HTML4 di transizione:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Probabilmente il tipo di documento predefinito assunto da alcuni browser è tale $(window).height() prende l'altezza del documento e non l'altezza del browser. Con la specifica doctype, è risolto in modo soddisfacente, e sono abbastanza sicuro che i peps eviteranno il "passaggio da scorrimento a overflow nascosto e poi indietro", che è, mi dispiace, un trucco un po 'sporco, specialmente se non lo fai' documentarlo sul codice per l'utilizzo futuro del programmatore.

2. Un suggerimento AGGIUNTIVO, nota a parte: Inoltre, se stai facendo uno script, puoi inventare dei test per aiutare i programmatori a usare le tue librerie, fammi inventare un paio:

$ (document) .ready (function () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      } 

});


EDIT: circa la parte 2, "Un suggerimento AGGIUNTIVO, nota a parte": @Machiel, nel commento di ieri (2014-09-04), era assolutamente UTENTE: il controllo di $ non può essere all'interno dell'evento pronto di Jquery, perché stiamo, come ha sottolineato, supponendo che $ sia già definito. GRAZIE PER AVER PENSATO QUESTO, e per favore, il resto di voi lettori corregga questo, se lo avete usato nei vostri script. Il mio suggerimento è: nelle tue librerie inserisci una funzione "install_script ()" che inizializza la libreria (inserisci qualsiasi riferimento a $ all'interno di tale funzione init, inclusa la dichiarazione di ready ()) e ALL'INIZIO di tale funzione "install_script ()" , controlla se $ è definito, ma rendi tutto indipendente da JQuery, così la tua libreria può "diagnosticare se stessa" quando JQuery non è ancora definito. Preferisco questo metodo piuttosto che forzare la creazione automatica di un JQuery che lo porta da un CDN. Quelle sono piccole note a parte per aiutare altri programmatori. Penso che le persone che creano librerie debbano essere più ricche nel feedback sugli errori potenziali del programmatore. Ad esempio, Google Apis ha bisogno di un manuale a parte per comprendere i messaggi di errore. È assurdo, avere bisogno di documentazione esterna per alcuni piccoli errori che non richiedono di andare a cercare un manuale o una specifica. La libreria deve essere SELF DOCUMENTATA. Scrivo codice anche occupandomi degli errori che potrei commettere anche tra sei mesi, e cerca ancora di essere un codice pulito e non ripetitivo, già scritto per prevenire futuri errori degli sviluppatori. Penso che le persone che creano librerie debbano essere più ricche nel feedback sugli errori potenziali del programmatore. Ad esempio, Google Apis ha bisogno di un manuale a parte per comprendere i messaggi di errore. È assurdo, avere bisogno di documentazione esterna per alcuni piccoli errori che non richiedono di andare a cercare un manuale o una specifica. La libreria deve essere SELF DOCUMENTATA. Scrivo codice anche occupandomi degli errori che potrei commettere anche tra sei mesi, e cerca ancora di essere un codice pulito e non ripetitivo, già scritto per prevenire futuri errori degli sviluppatori. Penso che le persone che creano librerie debbano essere più ricche nel feedback sugli errori potenziali del programmatore. Ad esempio, Google Apis ha bisogno di un manuale a parte per comprendere i messaggi di errore. È assurdo, avere bisogno di documentazione esterna per alcuni piccoli errori che non richiedono di andare a cercare un manuale o una specifica. La libreria deve essere SELF DOCUMENTATA. Scrivo codice anche occupandomi degli errori che potrei commettere anche tra sei mesi, e cerca ancora di essere un codice pulito e non ripetitivo, già scritto per prevenire futuri errori degli sviluppatori. Ho bisogno che tu vada a cercare un manuale o una specifica. La libreria deve essere SELF DOCUMENTATA. Scrivo codice anche occupandomi degli errori che potrei commettere anche tra sei mesi, e cerca ancora di essere un codice pulito e non ripetitivo, già scritto per prevenire futuri errori degli sviluppatori. Ho bisogno che tu vada a cercare un manuale o una specifica. La libreria deve essere SELF DOCUMENTATA. Scrivo codice anche occupandomi degli errori che potrei commettere anche tra sei mesi, e cerca ancora di essere un codice pulito e non ripetitivo, già scritto per prevenire futuri errori degli sviluppatori.


2
È molto difficile leggere il tuo post. Ripeti il ​​tuo post in modo da abituarti allo Stackdown Markdown come tutti gli altri. C'è un motivo per cui i siti StackExchange non usano TinyMCE , ma se ne hai un problema, lasciati coinvolgere da Meta .
Volomike,

È un po 'strano che controlli la disponibilità di $dopo aver già usato il $per chiamare $(document).ready(function() { } );. Va bene se controlli se jQuery è disponibile, ma a questo punto è già troppo tardi.
Machiel,

@Machiel, sei TUTTO GIUSTO. Fortunatamente sono andato a controllare i miei script e non usano l'evento ready. Sì, grazie, mi sono sentito stupido quando lo hai detto, ma per fortuna ho appena verificato che nei miei script il controllo è all'interno di una funzione chiamata "install_this_script ()", e in tale installazione chiamo la funzione init della libreria, ma prima di ciò, controllo (OUTSIDE JQUERY) se l'oggetto $ è definito o meno. GRAZIE IN QUALSIASI MODO, fratello, mi hai davvero spaventato! Temo che questo post sia stato qui troppo a lungo, spero che questo errore non abbia fatto molto male agli altri lettori. Ho corretto il post.
David L

Questa dovrebbe essere la vera risposta! Grazie!
Justin T. Watts,

6

È possibile utilizzare $ (finestra) .resize () per rilevare se il riquadro di visualizzazione viene ridimensionato.

jQuery non ha alcuna funzione per rilevare costantemente la larghezza e l'altezza corrette del viewport [1] quando è presente una barra di scorrimento.

Ho trovato una soluzione che utilizza la libreria Modernizr e in particolare la funzione mq che apre query multimediali per JavaScript.

Ecco la mia soluzione:

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

La mia risposta probabilmente non aiuterà a ridimensionare un iframe al 100% della larghezza della finestra con un margine su ciascun lato, ma spero che fornirà conforto per gli sviluppatori web frustrati dall'incoerenza del browser della larghezza della vista della javascript e dal calcolo dell'altezza.

Forse questo potrebbe aiutare per quanto riguarda l'iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Puoi usare $ (window) .width () e $ (window) .height () per ottenere un numero che sarà corretto in alcuni browser, ma errato in altri. In quei browser puoi provare a usare window.innerWidth e window.innerHeight per ottenere la larghezza e l'altezza corrette, ma sconsiglio questo metodo perché si baserebbe sullo sniffing dell'agente utente.

Di solito i diversi browser sono incoerenti sul fatto che includano o meno la barra di scorrimento come parte della larghezza e dell'altezza della finestra.

Nota: Sia $ (window) .width () che window.innerWidth variano tra i sistemi operativi utilizzando lo stesso browser. Vedi: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238


4
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });

L'uso di $ (window) .height () non ti darà la dimensione del viewport ma ti darà la dimensione dell'intera finestra, che di solito è la dimensione dell'intero documento sebbene il documento potrebbe essere ancora più grande.
AnuRaj,

ottimo per larghezza!
Marc,

2

Per ottenere la dimensione del viewport al caricamento e al ridimensionamento (basato sulla risposta di SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});

1

Si noti che le unità viewport CSS3 (vh, vw) non funzionerebbero bene su iOS Quando si scorre la pagina, la dimensione del viewport viene in qualche modo ricalcolata e aumenta anche la dimensione dell'elemento che utilizza le unità viewport. Quindi, in realtà è necessario un po 'di javascript.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.