Piszę witrynę za pomocą jquery, która wielokrotnie wywołuje $(window).width()i $(window).height()pozycjonuje i rozmiaruje elementy w oparciu o rozmiar widoku.
Podczas rozwiązywania problemów odkryłem, że otrzymuję raporty o nieco innych rozmiarach rzutni w powtarzających się wywołaniach powyższych funkcji jQuery, gdy rozmiar rzutni nie jest zmieniany.
Zastanawiam się, czy jest jakiś szczególny przypadek, o którym ktoś wie, kiedy to się dzieje, lub czy tak po prostu jest. Wygląda na to, że różnica w raportowanych rozmiarach wynosi 20 pikseli lub mniej. Dzieje się tak w Safari 4.0.4, Firefox 3.6.2 i Chrome 5.0.342.7 beta w systemie Mac OS X 10.6.2. Nie testowałem jeszcze innych przeglądarek, ponieważ wydaje się, że nie są one specyficzne dla przeglądarki. Nie byłem również w stanie dowiedzieć się, od czego zależy różnica, jeśli nie jest to rozmiar widocznego obszaru, czy może istnieć inny czynnik, który powoduje różnice w wynikach?
Każdy wgląd byłby doceniony.
aktualizacja:
Nie ma wartości $(window).width()i $(window).height()że się zmieniają. To wartości zmiennych, których używam do przechowywania wartości powyższych.
To nie paski przewijania wpływają na wartości, żadne paski przewijania nie pojawiają się, gdy zmieniają się wartości zmiennych. Oto mój kod do przechowywania wartości w moich zmiennych (co robię, aby były krótsze).
(wszystko to jest w środku $(document).ready())
// początkowo zadeklaruj zmienne jako widoczne dla innych funkcji wewnątrz .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()
Wstawiłem ostrzeżenie, aby sprawdzić powyższe zmienne pod kątem wartości, które rzekomo mają. Te $(item).param()wartości pozostać spójne, ale moje zmienne zmienić ze względów nie mogę zorientować się.
Szukałem miejsc, w których mój kod może zmieniać wartość danych zmiennych, w przeciwieństwie do pobierania ich ustawionych wartości i nie mogę ich znaleźć. Jeśli to możliwe, mogę gdzieś zamieścić cały shebang.
Spróbuj użyć
$(window).loadzdarzenielub
$(document).readyponieważ wartości początkowe mogą być niestałe z powodu zmian, które zachodzą podczas analizowania lub podczas ładowania DOM.
źródło
Zwróć uwagę, że jeśli problem jest spowodowany przez pojawiające się paski przewijania, wstaw
w Twoim CSS może być łatwym rozwiązaniem (jeśli nie potrzebujesz przewijania strony).
źródło
Miałem bardzo podobny problem. Podczas odświeżania strony otrzymywałem niespójne wartości height (). (To nie była moja zmienna powodująca problem, była to rzeczywista wartość wysokości).
Zauważyłem, że w nagłówku mojej strony najpierw wywołałem moje skrypty, a potem plik css. Przełączyłem się tak, że najpierw linkowany jest plik css, a następnie pliki skryptów i wydaje się, że do tej pory problem został rozwiązany.
Mam nadzieję, że to pomoże.
źródło