jquery $ (window) .height () zwraca wysokość dokumentu

104

Jestem pewien, że popełniam prosty błąd, ale po prostu ostrzegam $(window).height()i zwraca tę samą wartość, co $(document).height().

Mam 13-calowy MBA i wysokość okna moich przeglądarek po zmaksymalizowaniu między 780 - 820 pikseli (w przybliżeniu), ale za każdym razem zwraca wysokość okna identyczną z wysokością dokumentu. W każdym przypadku w witrynie, nad którą pracuję, jest ponad 1000px.

Co tu się dzieje?

alert($(window).height());
alert($(document).height());
jquery Fraser
źródło
nad jaką przeglądarką pracujesz?
Kanishka Panamaldeniya
Ten problem zaczął się pojawiać z jquery-1.8.0, starsze wersje jquery robiły to poprawnie (nawet bez zestawu DOCTYPE)
ralhei

Odpowiedzi:

245

Bez doctypetagu Chrome zgłasza tę samą wartość dla obu wywołań.

Dodanie ścisłego typu dokumentu, na przykład, <!DOCTYPE html>powoduje, że wartości będą działać zgodnie z zapowiedzią.

doctypeTag musi być bardzo pierwszą rzeczą w dokumencie. Np. Nie możesz mieć przed sobą żadnego tekstu, nawet jeśli nic nie renderuje.

Tom Hubbard
źródło
11
FireFox również wykonuje to raportowanie, chyba że używasz ścisłego typu dokumentu, takiego jak <! DOCTYPE HTML>
Tom Chiverton
również, niepoprawny doctype powoduje, że twitter bootstrap scrollspy zachowuje się dziwnie z tego samego powodu, dla którego $ (window) .height () zwraca wysokość dokumentu.
nidheeshdas
3
W moim przypadku miałem Response.Writew kodzie za stroną ASP, która wyświetlała 1przed jakimkolwiek kodem HTML. Więc mój typ dokumentu był właściwy, ale technicznie rzecz biorąc, nie był pierwszą rzeczą na stronie.
James
1
Mam ten sam problem, ale doctype jest poprawnie zadeklarowany :(
bia.migueis
1
„ Znacznik doctype musi być pierwszą rzeczą w dokumencie. Np. Nie możesz mieć przed sobą żadnego kodu php, nawet jeśli nic nie renderuje. ” Jak to możliwe? Przeglądarka nie wie, co działa serwer, otrzymuje tylko plik tekstowy ze znacznikami HTML. Co zrobić, jeśli używasz usług IIS, a nie Apache? Przeglądarka nie dba o to, co robi serwer.
Sablefoste
24

Miałem ten sam problem i dzięki temu rozwiązałem go.

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
źródło
1
tak dziwne, używam również odpowiedniego doctype. Twoja wewnętrzna wysokość rozwiązała mój problem! Dzięki
Martijn van Hoof
1
Ten sam problem - miał prawidłowy doctype i wszystko. Nieco bardziej wieloplatformowy: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson
naprawdę naprawiam problem (i tak, mam typ dokumentu - pierwsza rzecz na każdej stronie)
kod górny Kwietnia
1

Myślę, że twój dokument musi mieć wystarczająco dużo miejsca w oknie, aby wyświetlić jego zawartość. Oznacza to, że nie ma potrzeby przewijania w dół, aby zobaczyć więcej części dokumentu. W takim przypadku wysokość dokumentu byłaby równa wysokości okna.

Xmindz
źródło
Dokument rozciąga się poniżej dolnej części okna na każdej stronie.
Fraser
0

Oto pytanie i odpowiedź na to: Różnica między screen.availHeight i window.height ()

Ma też zdjęcia, więc możesz zobaczyć różnice. Mam nadzieję że to pomoże.

Zasadniczo $(window).height()podaje maksymalną wysokość wewnątrz okna przeglądarki (rzutni) i $(document).height()podaje wysokość dokumentu w przeglądarce. W większości przypadków będą dokładnie takie same, nawet z paskami przewijania.

Solomon Closson
źródło
0

To naprawdę działa, jeśli użyjemy Doctype na naszej stronie internetowej. Jquery (okno) zwróci wysokość widoku, w przeciwnym razie zwróci pełną wysokość dokumentu.

Zdefiniuj następujący tag u góry swojej strony internetowej: <!DOCTYPE html>

Gourav Yadav
źródło
użyj tego tagu u góry swojej strony internetowej: <! DOCTYPE html>
Gourav Yadav