被JavaScript中的文档尺寸所迷惑 [英] Confused by document dimensions in JavaScript

问题描述

我真的很困惑JavaScript中存在的不同属性，这些属性用于获取文档的尺寸以及如何获取这些数字.有人可以推荐一个不错的地方来开始理解我如何正确获取文档的大小和位置吗?

I am really confused by the different properties that exist in JavaScript for getting the dimensions of a document and how to get those numbers. Can someone recommend a good place to start to understand how I would get the size of the document and position stuff correctly?

推荐答案

我将尝试尽可能简单地回答.

I'll try to answer as simply as I can.

文档和视口

就几何而言，要注意两套尺寸；文档尺寸，它反映了加载页面的整个大小，包括窗口底部以外的内容和视口尺寸，它们反映了立即在窗口中显示的文档可见部分的大小.

In terms of geometry, there are two sets of dimensions to be aware of; the document dimensions, which reflect the entire size of the loaded page, including the content beyond the bottom of the window and the viewport dimensions, which reflect the size of the visible part of the document that is immediately displayed in the window.

向下滚动时，视口将在文档上向下移动一定数量的像素.换句话说，视口是实际的浏览器窗口边界"(工具栏，菜单，选项卡等).

When you scroll down, the viewport moves down over the document by a certain number of pixels. In other words, the viewport is the actual browser window "border" (the toolbars, menus, tabs, and so on).

混乱的原因在于，根据浏览器和模式的不同，会使用不同的属性来获取文档和视口的尺寸，并且它们会根据滚动条返回不同的结果.但是，我们将回到这一点.

The confusion comes from the fact that depending on the browser and mode, different properties are used to get the dimensions of a document and viewport, and they return different results depending on scrollbars. But we'll come back to this.

维度概述

从javascript开始，您可以使用许多属性，这些属性可以为您提供不同的尺寸.

There are a number of properties available to you from the get-go in javascript which give you different dimensions.

1. 屏幕分辨率: window.screen.width -Height

1. Screen resolution: window.screen.width -Height

可用的屏幕空间(与监视器分辨率相同)减去底座，工具栏和其他UI元素: window.screen.availWidth -Height.

Available screen space (same as monitor resolution) minus docks, toolbars and other UI elements: window.screen.availWidth -Height.

文档尺寸: document.documentElement.offsetWidth -Height 注意:这些数字不包括滚动条.

Document dimensions: document.documentElement.offsetWidth -Height Note: These numbers do not include the scrollbars.

视口尺寸: window.innerWidth -Height

• 这些数字包括滚动条.

• These numbers include the scrollbars.

此功能在IE 8和IE9中不可用，因此如果使用IE，请测试document.compatMode === "CSS1Compat"，如果为true，则使用document.documentElement.clientWidth -Height，对于怪癖模式，请使用document.body.clientWidth -Height.

This is not available in IE 8- and IE9, so if IE, test for the document.compatMode === "CSS1Compat" and if true, use document.documentElement.clientWidth -Height, and for quirks mode use document.body.clientWidth -Height.

有关文档尺寸的注释

如上所述，document.documentElement.offsetWidth/Height为您提供文档的实际大小.需要注意的一个问题是，滚动条在浏览器之间的工作方式有所不同.例如，即使文档高度小于视口高度，IE9也会始终显示垂直滚动条. Safari/Chrome在OS X Lion上没有滚动条.除非有必要，否则PC上的Chrome不会显示垂直滚动条.

As per above, document.documentElement.offsetWidth/Height provides you with the actual size of the document. One caveat to this is that scrollbars work differently between browsers. For example, IE9 will always display a vertical scrollbar even if the document height is less than the viewport height. Safari/Chrome doesn't have scrollbars on OS X Lion. Chrome on PC will not display vertical scrollbars unless it needs to.

因此您可能会遇到不一致和滚动条移动内容的问题.想象一下，您有一个绝对定位且居中的元素.因为CSS是相对于文档尺寸而不是视口尺寸来计算中心"的，所以说Google添加滚动条时，随着文档中心"的更改，您的内容可能会向左跳"一点.因此，如果您想打扰您，可能需要编写JS来弥补这种影响，或者也许这里的某人可以编写一个快速的JS函数来计算包含滚动条的文档尺寸.

So you may bump into inconsistencies and the Scrollbar shifts content problem. Imagine you have an absolutely positioned and centred element. Because CSS calculates the "centre" relative to the document dimensions and not the viewport dimensions, when say, Google adds the scrollbars, your content may "jump" a bit to the left as the "document centre" changes. So you may need to write JS to compensate for this effect if it bothers you, or maybe someone here can write a quick JS function to calculate document dimensions with scrollbars included.

滚动条位置和尺寸

尽管JavaScript中的某些方法可用于文档坐标，而其他方法可用于视口坐标，但通常这不是您想要的.例如，如果元素的顶部边缘在文档坐标中为20px，并且将页面向下滚动20px，则该元素的顶部边缘将相对于顶部视口坐标为0px.因此，要在两个系统之间进行转换，您首先需要知道用户滚动了文档多少个像素，然后将该数字添加到视口中以进行补偿(请参见下面的示例).

While some methods in JavaScript work with document coordinates, others work with viewport coordinates, and often this is not what you want. For example, if you have an element's top edge at 20px in document coordinates, and you scroll the page down by 20px, the top edge of that element will be at 0px relative to the top viewport coordinate. So to convert between the two systems, you first need to know by how many pixels a user has scrolled the document, and then add that number to the viewport to compensate (look at example below).

我也发现这些有用:

http://www.howtocreate.co.uk/tutorials/javascript/browserwindow

http://www.quirksmode.org/mobile/viewports.html

这是我快速整理的跨浏览器模块，可以为您提供帮助:

And here's a quick cross-browser module I mucked up to help you:

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())来获取视口宽度.

You can for example do console.log(dimensions.viewportWidth()) to get the viewport width.

希望这对您有所帮助:)

Hope this helps you :)

这篇关于被JavaScript中的文档尺寸所迷惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！