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

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