Bug整理——$(window).height()获取到$(document).height()的问题
?? 想看解決方案不想看無聊乏味的bug解決過程的同學，請直接跳轉到頁面底部~
?? 今天在做項目的過程中遇到了一個BUG，項目中需要獲取到瀏覽器客戶區的高度以方便做一些適應性調整，代碼如下：
$(document).ready(function(){var $content_height = $(window).height() - 30 - 53;var $nav_box_content_height = $content_height - 31 - 7;$("#nav_box_content").css("height",$nav_box_content_height);$(".main-container").css("min-height",$content_height);})????然而在部署到服務器之后，出現了bug，本身應有的響應動作并沒有發生，也沒有產生任何報錯。原因是$(window).height()獲取到了一個定值，也不會隨著瀏覽器窗口大小的變化而變化，百思不得其解。然后就開始各種alert程序中的變量尋找錯誤點（別吐槽，我知道大神們都用console。。。? ），開始的時候因為思維混亂，并沒有在意這個定值的意義。一頓瞎試之后突然想到應該關注這個數字的意義，猜想會不會是獲取到了文檔高度。于是做出了嘗試，alert了$(document).height()，果然相同。這時又到了百思不得其解的時刻了。
。。。。。。
?
。。。。。。
? 不知道大家看到上面的圖有沒有發現什么。對，問題在于HTML5的文檔聲明并沒有被瀏覽器解析到，在用了正確的html5文檔聲明后，bug果然消失了。貼出我的錯誤代碼：
。。。。。
改過之后的代碼是這樣的：
在瀏覽器中的解析：
會發現HTML5文檔聲明已經被瀏覽器解析到。、
查閱相關文檔發現，webkit內核的瀏覽器中，如果沒有正確的HTML5文檔聲明的話，便會出現$(window).height()獲取到的值永遠等于$(document).height()這樣的bug，深層原因不清楚，對Jquery源碼了解很深的人可以研究研究為啥會出現這個bug。? 另外，親測了非webkit內核的瀏覽器不會出現這樣的bug。
補充一些相關知識：
?????? 一、 HTML文檔聲明：Web世界中存在很多種類的文檔，只有告訴瀏覽器本文檔的文檔類型，瀏覽器才能正確的解析文檔進行顯示。HTML中的<!DOCTYPE>標簽就用來給瀏覽器提供信息，告訴瀏覽器本HTML文檔是用什么版本編寫的。
?????? 二、HTML5文檔聲明：? 目前常用的是
<!DOCTYPE html> <html>!-- 文檔內容 --></html>這個是一種簡略寫法，完整的寫法是這樣的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">?
這兩種寫法并沒有什么區別，現在相當多的產品也都使用的簡略寫法。
??? 三、瀏覽器客戶區高度與文檔高度： 瀏覽器客戶區高度是指瀏覽器可視區域的高度，而文檔高度是整個頁面的高度。寬度同理，獲取他們的方法是：
瀏覽器客戶區： $(window).height() $(window).width() 文檔區： $(document).height() $(document).width()總結：?? 出現$(window).height()獲取不正常并等于$(document).height()是由于沒有正確的HTML5文檔聲明導致的，并且僅在webkit內核中會有此問題。
?
轉載于:https://www.cnblogs.com/zhuwq585/p/5400986.html
總結
以上是生活随笔為你收集整理的Bug整理——$(window).height()获取到$(document).height()的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 在pcduino上实现图像识别的程序
- 下一篇： CKedit在线编辑器