Смущает размеры документа в JavaScript

Question

Я действительно смущен различными свойствами, которые существуют в JavaScript для получения размеров документа и способа получения этих чисел. Может кто-то порекомендовать хорошее место, чтобы начать понимать, как правильно получить размер документа и положение вещей?

Answer 1

Я постараюсь ответить как можно проще.

Документ и ВЭкран

С точки зрения геометрии, существуют два набора измерений, чтобы быть в курсе; размеры документа, которые отражают весь размер загруженной страницы, включая содержимое за пределами нижней части окна и размеры окна просмотра, которые отражают размер видимой части документа, который сразу отображается в окне.

При прокрутке вниз область просмотра перемещается вниз по документу на определенное количество пикселей. Другими словами, видовой экран является фактическим окном браузера «граница» (панели инструментов, меню, вкладки и т. Д.).

Путаница возникает из-за того, что в зависимости от браузера и режима различные свойства используются для получения размеров документа и окна просмотра, и они возвращают разные результаты в зависимости от полос прокрутки. Но мы вернемся к этому.

Размеры Обзор

Есть целый ряд свойств доступны с самого начала идти в JavaScript, которые дают вам различные размеры.

1. Разрешение экрана: window.screen.width -Height

2. Свободное пространство экрана (так же, как разрешение монитора) минус доки, панели инструментов и другие элементы пользовательского интерфейса: window.screen.availWidth -Height.

3. документы Размеры: document.documentElement.offsetWidth -Height Примечание: Эти цифры не включают в себя полосу прокрутки.

4. Viewport размеры: window.innerWidth -Height

   • Эти цифры включают полосы прокрутки.

   • Это не доступно в IE 8 и IE9, так что, если IE, тест на document.compatMode === "CSS1Compat" и если это правда, использовать document.documentElement.clientWidth -Height, а также для использования в document.body.clientWidth -Height режиме причуды.

Примечание о размерах документа

Как указано выше, document.documentElement.offsetWidth/Height предоставляет вам фактический размер документа. Одно из предостережений заключается в том, что полосы прокрутки работают по-разному между браузерами. Например, IE9 всегда будет отображать вертикальную полосу прокрутки, даже если высота документа меньше высоты окна просмотра. Safari/Chrome не имеет полос прокрутки на OS X Lion. Chrome на ПК не отображает вертикальные полосы прокрутки, если это необходимо.

Таким образом, вы можете столкнуться с несоответствиями и проблемой Scrollbar shifts content. Представьте, что у вас есть абсолютно позиционированный и центрированный элемент. Поскольку CSS вычисляет «центр» относительно размеров документа, а не размеры видовых экранов, скажем, Google добавляет полосы прокрутки, ваш контент может «прыгать» немного влево, поскольку изменяется «центр документа». Поэтому вам может потребоваться написать JS, чтобы компенсировать этот эффект, если это вас беспокоит, или, может быть, кто-то здесь может написать быструю JS-функцию для расчета размеров документа с включенными полосами прокрутки.

Scrollbar Положение и размеры

Хотя некоторые методы в JavaScript работать с координатами документа, другие работают с координатами окна просмотра, и часто это не то, что вы хотите. Например, если у вас есть верхний край элемента в 20 пикселей в координатах документа, и вы прокручиваете страницу вниз на 20 пикселей, верхний край этого элемента будет равен 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()), чтобы получить ширину окна просмотра.

Надеюсь, это вам поможет :)