Viewport vs Window Vs Document

В приведенном ниже коде

document.documentElement.clientWidth
   1349
document.documentElement.clientHeight
   363
window.innerWidth
   1366
window.innerHeight
   363
window.screen.height
   768
window.screen.width
   1366

Итак, мой рабочий стол имеет ширину 1366 пикселей и высоту 768 пикселей.

Я узнал, что

размеры видовых экранов передаются с использованием document.documentElement.clientWidth и document.documentElement.clientHeight.

размеры окна передаются с использованием window.innerWidth и window.innerHeight.

1) В чем разница между окном просмотра и документом?

2), когда вызывается window.onload Vs document.onload?

Ответ 1

Все меняется, когда ваша страница больше вашего экрана.

Viewport - это область прямоугольника, в которой вещи видны вам. Документ может быть больше, и вы увидите полосы прокрутки, если это так.

Что касается вашего второго вопроса: window.onload vs document.onload

Вот сводка.

Видовой экран: Это экран вашего устройства.

Окно: Это ваше окно браузера. Окно может быть большим, чем область просмотра или меньше.

Документ: Это веб-страница. Он может быть больше, чем область просмотра или даже больше, чем окно.

Примечания: Некоторые сайты предназначены для мобильных телефонов. Следовательно, веб-страница/документ намного больше, чем мобильный видовой экран, и вам приходится прокручивать, чтобы увидеть части, которые выходят за пределы экрана. На рабочем столе вы можете сделать окно вашего браузера меньшим или похожим на окно просмотра/монитора.

Ответ 2

документ:

document - это объект в JavaScript, который представляет DOM (Document Object Model) вашей страницы. Объект документа представляет собой представление всей структуры страницы (все элементы HTML и т.д.), Поэтому это:

document.documentElement.clientHeight
document.documentElement.clientWidth

должен указывать ширину вашего элемента <html>

окна просмотра:

используя это:

window.innerWidth
window.innerHeight

дает вам фактические видимые (физические) размеры окна внутри вашего браузера, за исключением полос прокрутки

window.onload

window.onload(a.k.a body.onload) запускается после основного HTML, все CSS, все изображения и все остальные ресурсы были загружены и отображены.

document.onLoad

вызывается, когда DOM готов, который может быть до загрузки изображений и другого внешнего содержимого.