视窗的宽度并不总是窗口的宽度。如果您在 Chrome 或 Firefox 中查询窗口和文档的宽度或高度，您可能会得到
jsdocument.documentElement.clientWidth; /* 1200 */
window.innerWidth; /* 1200 */
window.outerWidth; /* 1200 */
jsdocument.documentElement.clientHeight; /* 800 */
window.innerHeight; /* 800 */
window.outerHeight; /* 900 */
有几个 DOM 属性可以帮助您查询视窗大小和其他类似长度
文档元素的 Element.clientWidth 是文档的内部宽度，以 CSS 像素 为单位，包括内边距（但不包括边框、外边距或垂直滚动条，如果有）。这就是视窗宽度。
The Window.innerWidth is the width, in CSS pixels, of the browser window viewport including, if rendered, the vertical scrollbar.
The Window.outerWidth is the width of the outside of the browser window including all the window chrome.
In an experiment with these, the innerWidth and outerWidth was seen to be the same, but the outerHeight was 100px taller than the innerHeight. This is because the outerHeight includes the browser chrome: measurements were taken on a browser with an address bar and bookmarks bar totalling 100px in height, but no chrome on the left or right of the window.
The area within the innerHeight and innerWidth is generally considered the layout viewport. The browser chrome is not considered part of the viewport.
当放大时，Firefox 和 Chrome 都会报告 innerWidth 和 clientWidth 的新 CSS 像素大小。outerWidth 和 outerHeight 返回的值取决于浏览器：Firefox 报告新值以 CSS 像素为单位，但 Chrome 返回默认像素大小的长度。放大时，您可能会得到
jsdocument.documentElement.clientWidth; /* 800 */
window.innerWidth; /* 800 */
window.outerWidth; /* 800 in Firefox, 1200 in chrome */
jsdocument.documentElement.clientHeight; /* 533 */
window.innerHeight; /* 533 */
window.outerHeight; /* 596 in Firefox, 900 in chrome */
视窗最初为 1200 x 800 像素。放大后，视窗变为 800 x 533 像素。这是布局视窗。具有以下样式的粘性页眉或页脚将分别粘贴到布局视窗的顶部和底部。
cssbody > header {
position: fixed;
top: 0;
}
body > footer {
position: fixed;
bottom: 0;
}
我们使用键盘放大时获得了 800 x 533 的测量值。页眉和页脚保持与窗口顶部和底部的对齐。但如果我们在平板电脑上捏缩放呢？如果手机上弹出一个动态键盘呢？
网页包含两个视窗，布局视窗和视觉视窗。视觉视窗是网页中当前在浏览器中可见的部分，并且可以更改。当用户捏缩放页面、弹出动态键盘或先前隐藏的地址栏变为可见时，视觉视窗会缩小，但布局视窗保持不变。
如上所述，粘性页眉或页脚粘贴到布局视窗的顶部和底部，因此在我们使用键盘放大时仍然可见。如果您捏缩放，布局视窗可能不会完全可见。如果您从布局视窗的中间放大，内容将在四个方向上扩展。如果您有粘性页眉或页脚，它们将仍然粘贴到布局视窗的顶部或底部，但它们可能不会在设备屏幕的顶部和底部可见——也就是视觉视窗。视觉视窗是布局视窗中当前可见的部分。如果您向下滚动，您正在更改视觉视窗的内容并将布局视窗的底部调入视图，显示粘性页脚，然后它将保持粘贴在底部。
视觉视窗是屏幕的视觉部分，不包括屏幕键盘、捏缩放区域之外的区域或其他不随页面尺寸缩放的功能。视觉视窗与布局视窗大小相同或更小。
对于包含 iframe、对象或外部 SVG 的页面，包含页面和每个包含文件都有自己的唯一窗口对象。只有顶级窗口具有可能与布局视窗不同的视觉视窗。对于包含文档，视觉视窗和布局视窗是相同的。