Я постараюсь ответить так же просто, как могу.
Документ и область просмотра
С точки зрения геометрии необходимо учитывать два набора измерений; размеры документа, которые отражают весь размер загруженной страницы, включая содержимое за пределами нижней части окна и размеры области просмотра, которые отражают размер видимой части документа, которая немедленно отображается в окне.
При прокрутке вниз область просмотра перемещается вниз по документу на определенное количество пикселей. Другими словами, область просмотра - это фактическая «граница» окна браузера (панели инструментов, меню, вкладки и т. Д.).
Путаница возникает из-за того, что в зависимости от браузера и режима разные свойства используются для получения размеров документа и области просмотра, и они возвращают разные результаты в зависимости от полос прокрутки. Но мы вернемся к этому.
Обзор размеров
Существует множество свойств, доступных вам с самого начала в javascript, которые дают вам различные измерения.
Разрешение экрана:
window.screen.width -Height
Доступное пространство экрана (такое же, как разрешение монитора) за вычетом доков, панелей инструментов и других элементов пользовательского интерфейса:
window.screen.availWidth -Height.
Размеры документа:
document.documentElement.offsetWidth -Height
Примечание. Эти цифры не включают полосы прокрутки.
Размеры области просмотра:
window.innerWidth -Height
Эти цифры включают полосы прокрутки.
Это недоступно в IE 8- и IE9, поэтому если IE, проверьте для document.compatMode === "CSS1Compat" и, если true, используйте document.documentElement.clientWidth -Height, а для режима причуд используйте document.body.clientWidth -Height.
Примечание о размерах документа
Как указано выше, document.documentElement.offsetWidth/Height предоставляет вам фактический размер документа. Одним из предостережений к этому является то, что полосы прокрутки работают по-разному в разных браузерах. Например, IE9 всегда будет отображать вертикальную полосу прокрутки, даже если высота документа меньше высоты области просмотра. Safari / Chrome не имеет полос прокрутки в OS X Lion. Chrome на ПК не будет отображать вертикальные полосы прокрутки, если в этом нет необходимости.
Таким образом, вы можете столкнуться с несоответствиями, и проблема прокрутки смещает содержимое . Представьте, что у вас есть абсолютно позиционированный и центрированный элемент. Поскольку CSS вычисляет «центр» относительно размеров документа, а не размеров области просмотра, когда, скажем, Google добавляет полосы прокрутки, ваш контент может «подскочить» немного влево при изменении «центра документа». Поэтому вам может потребоваться написать JS, чтобы компенсировать этот эффект, если это вас беспокоит, или, может быть, кто-то здесь может написать быструю функцию JS для вычисления размеров документа с включенными полосами прокрутки.
Положение и размеры полосы прокрутки
Хотя некоторые методы в JavaScript работают с координатами документа, другие работают с координатами области просмотра, и часто это не то, что вам нужно. Например, если у вас есть верхний край элемента в 20px в координатах документа, и вы прокрутите страницу вниз на 20px, верхний край этого элемента будет в 0px относительно верхней координаты области просмотра. Поэтому для преобразования между двумя системами сначала необходимо узнать, на сколько пикселей пользователь прокручивал документ, а затем добавить это число в область просмотра для компенсации (см. Пример ниже).
Я также нашел это полезным:
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
http://www.quirksmode.org/mobile/viewports.html
А вот быстрый кросс-браузерный модуль, который я вам помог:
var dimensions = (function(){
var dims = {};
// get screen width/height:
dims.screenWidth = function() { window.screen.width };
dims.screenHeight = function() { return window.screen.height };
// get screen width/height minus chrome:
dims.availWidth = function() { return window.screen.availWidth };
dims.availHeight = function() { return window.screen.availHeight };
// get document width/height (with-out scrollbars):
if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode
dims.documentWidth = function() { return document.body.offsetWidth };
dims.documentHeight = function() { return document.body.offsetHeight };
}
else {
dims.documentWidth = function() { return document.documentElement.offsetWidth };
dims.documentHeight = function() { return document.documentElement.offsetHeight };
}
// get viewport width/height (with scrollbars):
if (window.innerWidth != null) {
dims.viewportWidth = function () { return window.innerWidth };
dims.viewportHeight = function () { return window.innerHeight };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.viewportWidth = function () {
return window.document.documentElement.clientWidth
};
dims.viewportHeight = function () {
return window.document.documentElement.clientHeight
};
}
// get scrollbar offsets:
if (window.pageXOffset != null) {
dims.scrollXOffset = function() { return window.pageXOffset };
dims.scrollYOffset = function() { return window.pageYOffset };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.scrollXOffset = function() { return document.documentElement.scrollLeft };
dims.scrollYOffset = function() { return document.documentElement.scrollTop };
}
return dims;
}());
Например, вы можете сделать console.log(dimensions.viewportWidth()), чтобы получить ширину области просмотра.
Надеюсь, это поможет вам:)