Perché $ (window) .width() cambia mentre la pagina si sta caricando?

Question

ho notato che il mio script stavano mettendo larghezze in modo non corretto, così ho provato il seguente frammento:

var prev; 
setInterval(function(){ 
    if($(window).width()!=prev) 
     console.log(prev=$(window).width()); 
},1); 

Questo stampati 2 valori diversi: il 1464 e il 1481. Dal momento che questi sono 17px a parte, io sono quasi certo questo è causato con le barre di scorrimento. Il secondo valore è il valore corretto.

Perché lo $(window).width() cambia senza ridimensionare la finestra? Non dovrebbe restituire la larghezza della finestra del browser, che dovrebbe essere costante?

Answer 1

$(window).width() è interessato dal margine, dal bordo e dal riempimento. Questi possono cambiare durante il caricamento del DOM. Come menzionato sopra, assicurati di attendere fino al $(document).ready() prima di iniziare a guardare/giocare con gli oggetti DOM.

Maggiori informazioni qui http://api.jquery.com/width/

Answer 2

Nella maggior parte dei casi, le variazioni di larghezza della finestra con il contenuto, quindi ci deve essere una certa chiamata AJAX venire che cambia alcuni contenuti della finestra. Puoi usare lo strumento debug del browser e aprire la finestra del traffico di rete per vedere cosa succede quando la larghezza della finestra cambia, eseguire il debug nel file javascript per trovare quale parte della finestra cambia con quella chiamata ajax, questo può aiutarti a trovare il motivo.

Answer 3

$(window).width() restituisce la larghezza delle window oggetto esclusi barre di scorrimento (altrimenti noto come la larghezza finestra). A seconda del sistema operativo e del browser, la barra di scorrimento verticale può spesso sottrarre dalla larghezza della finestra. Ciò significa che devi chiamare questa funzione una volta che tutti i tuoi contenuti sono stati caricati e dovrai chiamarlo di nuovo se il contenuto cambia.

L'inserimento di questa funzione nella funzione $.ready() non garantisce che si otterrà la larghezza corretta rispetto al contenuto della pagina finale. Questo perché $.ready si attiva quando il DOM viene caricato, ma potrebbero ancora esserci immagini/caratteri che possono influenzare il layout. È molto probabile che una barra di scorrimento possa essere aggiunta dopo chiami $.ready(). La soluzione più semplice a questo problema è inserire la chiamata all'interno della funzione $(window).load(), poiché si attiva quando tutto il contenuto è stato caricato e non c'è più nulla da eseguire.

In generale, è una buona idea impostare la larghezza su DOM ready, caricamento della finestra, ridimensionamento della finestra e ogni volta che il contenuto cambia. Questo può essere fatto in questo modo:

$(function() { 
    var window_width; 

    function set_window_width() { 
    window_width = $(window).width(); 

    // do something with window_width 
    } 
    set_window_width(); // set width on DOM ready 

    $(window).on('load resize', set_window_width); // set width on window load and resize 

    function custom_load_content() { 
    // load/change content 

    set_window_width(); 
    } 
}); 

La maggior parte (se non tutti) del tempo, la larghezza viewport è ciò che si desidera. Probabilmente stai usando la larghezza per eseguire alcuni calcoli e/o ridimensionare alcuni elementi, e questo dovrebbe sempre essere relativo al viewport, perché il tuo CSS è relativo al viewport. Ma, se per qualche motivo si desidera ottenere la larghezza comprese le barre di scorrimento, è possibile utilizzare invece window.innerWidth (source).