jquery $ (window) .height () mengembalikan tinggi dokumen

104

Saya yakin ada kesalahan sederhana yang saya buat, tetapi saya hanya memberi tahu $(window).height()dan mengembalikan nilai yang sama seperti $(document).height().

Saya memiliki gelar MBA 13 "dan tinggi jendela browser saya ketika dimaksimalkan antara 780px - 820px (kira-kira) tetapi setiap kali ia mengembalikan tinggi jendela yang identik dengan tinggi dokumen. Dalam setiap kasus di situs yang saya kerjakan, itu adalah lebih dari 1000px.

Apa yang terjadi disini?

alert($(window).height());
alert($(document).height());
jquery Fraser
sumber
apa browser yang sedang kamu kerjakan?
Kanishka Panamaldeniya
Masalah ini mulai muncul dengan jquery-1.8.0, versi jquery yang lebih lama melakukan ini dengan benar (bahkan tanpa set DOCTYPE)
ralhei

Jawaban:

245

Tanpa doctypetag, Chrome melaporkan nilai yang sama untuk kedua panggilan.

Menambahkan doctype like yang ketat <!DOCTYPE html>menyebabkan nilai berfungsi seperti yang diiklankan.

Itu doctype tag harus menjadi sangat hal pertama di dokumen Anda. Misalnya, Anda tidak dapat memiliki teks sebelumnya, bahkan jika teks tersebut tidak merender apa pun.

Tom Hubbard
sumber
11
FireFox juga melakukan pelaporan ini kecuali Anda menggunakan doctype yang ketat seperti <! DOCTYPE HTML>
Tom Chiverton
juga, doctype yang salah membuat twitter bootstrap scrollspy bertindak aneh karena alasan yang sama dengan $ (window) .height () mengembalikan tinggi dokumen.
nidheeshdas
3
Dalam kasus saya, saya memiliki Response.Writekode saya di belakang di situs ASP yang menghasilkan 1sebelum HTML. Jadi tipe dokumen saya benar, tetapi secara teknis bukan yang pertama di halaman.
Yakobus
1
saya memiliki masalah yang sama tetapi doctype dinyatakan dengan benar :(
bia.migueis
1
" Tag doctype harus menjadi hal pertama dalam dokumen Anda. Misalnya, Anda tidak dapat memiliki kode php sebelumnya, bahkan jika itu tidak membuat apa pun. " Bagaimana mungkin ini terjadi? Browser tidak tahu apa yang dijalankan server, ia hanya menerima file teks dengan markup HTML. Bagaimana jika Anda menjalankan IIS dan bukan Apache? Browser tidak peduli apa yang dilakukan server.
Sablefoste
24

Saya memiliki masalah yang sama, dan menggunakan ini menyelesaikannya.

var w = window.innerWidth;
var h = window.innerHeight;
Eduardo
sumber
1
sangat aneh, saya juga menggunakan doctype yang tepat. batin Anda memperbaiki masalah saya! Terima kasih
Martijn van Hoof
1
Masalah yang sama - memiliki doctype yang valid dan semuanya. Sedikit lebih lintas platform: var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
melanie johnson
benar-benar memperbaiki masalah (dan ya saya punya doctype - hal pertama di setiap halaman)
hillcode
1

Saya pikir dokumen Anda harus memiliki cukup ruang di jendela untuk menampilkan isinya. Itu berarti tidak perlu menggulir ke bawah untuk melihat bagian dokumen lainnya. Dalam hal ini, tinggi dokumen akan sama dengan tinggi jendela.

Xmindz
sumber
Dokumen berada di bawah bagian bawah jendela di setiap halaman.
Fraser
0

Inilah pertanyaan dan jawaban untuk ini: Perbedaan antara screen.availHeight dan window.height ()

Memiliki gambar juga, jadi Anda benar-benar dapat melihat perbedaannya. Semoga ini membantu.

Pada dasarnya, $(window).height()memberi Anda tinggi maksimum di dalam jendela browser (viewport), dan $(document).height()memberi Anda tinggi dokumen di dalam browser. Seringkali, keduanya akan persis sama, bahkan dengan scrollbar.

Solomon Closson
sumber
0

Ini benar-benar berfungsi jika kita menggunakan Doctype pada halaman web kita, jquery (window) akan mengembalikan tinggi viewport jika tidak ia akan mengembalikan tinggi dokumen lengkap.

Tentukan tag berikut di bagian atas halaman web Anda: <!DOCTYPE html>

Gourav Yadav
sumber
gunakan tag ini di bagian atas halaman web Anda: <! DOCTYPE html>
Gourav Yadav