Разница между $(window).width() vs $(document).width()

Ответ 1

Из документации width():

Этот метод также может найти ширину окна и документа.

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

Простая демонстрация jsFiddle

В демоверсии я установил html { width: 1000px; }, который больше, чем область просмотра.

Ширина тела вашей HTML-страницы является третьим значением. $('body').width() также может отличаться от двух других (например, попробуйте body { margin: 100px; }).

Ответ 2

Вы правы. window - видимая область браузера. document - это фактическое тело страницы. Таким образом, ваш document может простираться далеко за пределы window

Ответ 3

Ну, window - это первое, что загружается в браузер. Этот объект window имеет большинство свойств, таких как length, innerWidth, innerHeight, name, если он был закрыт, его родители и больше.

Как насчет объекта документа?

Объектом document является ваш html-документ, который будет загружен в браузер. document фактически загружается внутри объекта windowи имеет доступные ему свойства, такие как название, URL, cookie и т.д. Что это действительно означает? Это означает, что если вы хотите получить доступ к window это window.property, если это document, это window.document.property, который также доступен коротким образом document.property.

Итак, в заключение документ может быть меньше окна.

FROM: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/

Ответ 4

$(window).width(); возвращает ширину окна просмотра браузера

$(document).width(); возвращает ширину HTML-документа

$(document).width() является немного ненадежным, что приводит к более низкому значению для полноэкранного браузера. $(window).width() безопаснее.

$(window).width() получает всю ширину окна, включая такие вещи, как полоса прокрутки.

Ответ 5

Еще одно важное отличие.

$(window).width(); доступен до того, как документ загрузится/готов.

$(document).width(); доступен только после загрузки документа

Итак, для второго вам нужно

$(document).ready(function() {
   var w = $(document).width();
});

Ответ 6

Да - ширина окна - это ширина окна браузера, а ширина документа - это ширина веб-страницы.