jquery $ (window) .width () e $ (window) .height () restituiscono valori diversi quando il viewport non è stato ridimensionato

Sto scrivendo un sito utilizzando jquery che richiama ripetutamente $(window).width()e $(window).height()per posizionare e dimensionare gli elementi in base alle dimensioni del viewport.

Durante la risoluzione dei problemi ho scoperto che sto ottenendo rapporti sulle dimensioni del viewport leggermente diversi nelle chiamate ripetute alle funzioni jquery di cui sopra quando il viewport non viene ridimensionato.

Chiedendosi se c'è qualche caso speciale che qualcuno sappia quando questo accade, o se è proprio così. La differenza nelle dimensioni riportate è di 20 px o meno, a quanto pare. Succede in Safari 4.0.4, Firefox 3.6.2 e Chrome 5.0.342.7 beta su Mac OS X 10.6.2. Non ho ancora testato altri browser perché non sembra essere specifico per il browser. Non sono stato nemmeno in grado di capire da cosa dipende la differenza, se non è la dimensione del viewport, potrebbe esserci un altro fattore che differenzia i risultati?

Qualsiasi intuizione sarebbe apprezzata.

aggiornare:

Non sono i valori di $(window).width()e $(window).height()che stanno cambiando. Sono i valori delle variabili che sto usando per memorizzare i valori di cui sopra.

Non sono le barre di scorrimento che influenzano i valori, nessuna barra di scorrimento appare quando i valori delle variabili cambiano. Ecco il mio codice per memorizzare i valori nelle mie variabili (cosa che sto facendo solo in modo che siano più brevi).

(tutto questo è dentro $(document).ready())

// inizialmente dichiara le variabili come visibili ad altre funzioni all'interno .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

Ho inserito un'istruzione di avviso per sondare le variabili sopra rispetto ai valori che dovrebbero contenere. I $(item).param()valori rimangono coerenti, ma le mie variabili cambiano per motivi che non riesco a capire.

Ho cercato luoghi in cui il mio codice potrebbe alterare il valore delle variabili in questione, invece di recuperare semplicemente i valori impostati e non trovarne nessuno. Posso postare l'intera faccenda da qualche parte se è possibile.

Penso che quello che stai vedendo sia nascondere e mostrare le barre di scorrimento. Ecco una rapida demo che mostra la modifica della larghezza .

Per inciso: hai bisogno di sondare costantemente? Potresti essere in grado di ottimizzare il tuo codice per l'esecuzione sull'evento di ridimensionamento, in questo modo:

$(window).resize(function() {
  //update stuff
});

Prova a usare un file

• $(window).load evento

o

• $(document).ready

  perché i valori iniziali possono essere incostanti a causa delle modifiche che si verificano durante l'analisi o durante il caricamento del DOM.

Nota che se il problema è causato dalla comparsa di barre di scorrimento, inserire

body {
  overflow: hidden;
}

nel tuo CSS potrebbe essere una soluzione facile (se non hai bisogno che la pagina scorra).

Stavo avendo un problema molto simile. Ricevo valori di altezza () incoerenti quando ho aggiornato la mia pagina. (Non era la mia variabile a causare il problema, era il valore di altezza effettivo.)

Ho notato che in testa alla mia pagina ho chiamato prima i miei script, poi il mio file css. Sono passato in modo che il file css sia collegato prima, quindi i file di script e questo sembra aver risolto il problema finora.

Spero che aiuti.