視窗概念

本文解釋了視窗的概念——它是什麼、它在 CSS、SVG 和移動裝置方面的影響，並區分了視覺視窗和佈局視窗。

什麼是視窗？

視窗表示計算機圖形中當前正在檢視的區域。在網頁瀏覽器術語中，它通常與瀏覽器視窗相同，不包括 UI、選單欄等。這是您正在檢視的文件的一部分。

像本文這樣的文件可能非常長。您的視窗是當前可見的任何內容，特別是“什麼是視窗”部分，以及可能的一些導航選單。視窗的大小取決於螢幕的大小，瀏覽器是否處於全屏模式，以及使用者是否放大。視窗之外的內容，例如本文件中的“另請參閱”部分，可能在滾動到檢視之前不會顯示在螢幕上。

  • 在應用程式並非始終全屏的大型顯示器上，視窗是瀏覽器視窗的大小。
  • 在大多數移動裝置上以及瀏覽器處於全屏模式時，視窗是整個螢幕。
  • 在全屏模式下，視窗是裝置螢幕，視窗是瀏覽器視窗，可以與視窗一樣大或更小，文件是網站，可以比視窗高或寬得多。

概括來說，視窗基本上是文件中當前可見的部分。

視窗大小是可變的

視窗的寬度並不總是視窗的寬度。如果您在 Chrome 或 Firefox 中查詢視窗和文件的寬度或高度，您可能會得到

js
document.documentElement.clientWidth; /* 1200 */
window.innerWidth; /* 1200 */
window.outerWidth; /* 1200 */
js
document.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 返回預設畫素大小的長度。放大時，您可能會得到

js
document.documentElement.clientWidth; /* 800 */
window.innerWidth; /* 800 */
window.outerWidth; /* 800 in Firefox, 1200 in chrome */
js
document.documentElement.clientHeight; /* 533 */
window.innerHeight; /* 533 */
window.outerHeight; /* 596 in Firefox, 900 in chrome */

視窗最初為 1200 x 800 畫素。放大後，視窗變為 800 x 533 畫素。這是佈局視窗。具有以下樣式的粘性頁首或頁尾將分別貼上到佈局視窗的頂部和底部。

css
body > header {
  position: fixed;
  top: 0;
}
body > footer {
  position: fixed;
  bottom: 0;
}

我們使用鍵盤放大時獲得了 800 x 533 的測量值。頁首和頁尾保持與視窗頂部和底部的對齊。但如果我們在平板電腦上捏縮放呢？如果手機上彈出一個動態鍵盤呢？

網頁包含兩個視窗，佈局視窗和視覺視窗。視覺視窗是網頁中當前在瀏覽器中可見的部分，並且可以更改。當用戶捏縮放頁面、彈出動態鍵盤或先前隱藏的位址列變為可見時，視覺視窗會縮小，但佈局視窗保持不變。

如上所述，粘性頁首或頁尾貼上到佈局視窗的頂部和底部，因此在我們使用鍵盤放大時仍然可見。如果您捏縮放，佈局視窗可能不會完全可見。如果您從佈局視窗的中間放大，內容將在四個方向上擴充套件。如果您有粘性頁首或頁尾，它們將仍然貼上到佈局視窗的頂部或底部，但它們可能不會在裝置螢幕的頂部和底部可見——也就是視覺視窗。視覺視窗是佈局視窗中當前可見的部分。如果您向下滾動，您正在更改視覺視窗的內容並將佈局視窗的底部調入檢視，顯示粘性頁尾，然後它將保持貼上在底部。

視覺視窗是螢幕的視覺部分，不包括螢幕鍵盤、捏縮放區域之外的區域或其他不隨頁面尺寸縮放的功能。視覺視窗與佈局視窗大小相同或更小。

對於包含 iframe、物件或外部 SVG 的頁面，包含頁面和每個包含檔案都有自己的唯一視窗物件。只有頂級視窗具有可能與佈局視窗不同的視覺視窗。對於包含文件，視覺視窗和佈局視窗是相同的。

CSS

上面描述的佈局視窗和視覺視窗不是您遇到的唯一視窗。任何完全或部分顯示在佈局視窗內的子視窗都被視為視覺視窗。

我們通常認為寬度和高度媒體查詢與瀏覽器視窗的寬度和高度相關。它們實際上是相對於視窗的，視窗是主文件中的視窗，但在巢狀的瀏覽上下文中（如物件、iframe 和 SVG）是元素父級的固有大小。在 CSS 中，我們還有基於視窗大小的長度單位。vh 單位是佈局視窗高度的 1%。類似地，vw 單位是佈局視窗寬度的 1%。

<iframe>

在 iframe 內部，視覺視窗是 iframe 內部寬度和高度的大小，而不是父文件。您可以在 iframe 上設定任何高度和寬度，但整個文件可能不可見。

如果您在 iframe 文件中的 CSS 中使用視窗長度單位，1vh 將是 iframe 高度的 1%，1vw 將是文件寬度的 1%。

css
iframe {
  width: 50vw;
}

如果 iframe 設定為 50vw，它將是我們上面示例中 1200px 父文件寬度的 50%，即 600px，其中 1vw 為 6px。放大後，iframe 縮小到 400px，1vw 變為 4px。

iframe 文件內的基於寬度的媒體查詢相對於 iframe 的視窗。

css
@media screen and (min-width: 500px) {
  p {
    color: red;
  }
}

如果上面的 CSS 包含在 iframe 中，當用戶放大時，段落將變為紅色，但此樣式在未放大狀態下不適用。

SVG

在 SVG 文件中，視窗是 SVG 影像的可見區域。您可以在 SVG 上設定任何高度和寬度，但整個影像可能不可見。可見的區域稱為視窗。視窗的大小可以使用 <svg> 元素的寬度和高度屬性定義。

html
<svg height="300" width="400"></svg>

在此示例中，視窗的縱橫比為 3:4，預設情況下為 400 x 300 個單位，其中一個單位通常為 CSS 畫素。

SVG 還透過 viewBox 屬性定義了一個內部座標系，這與本視窗討論無關。

如果您在 HTML 中包含 SVG 檔案，SVG 的視窗是初始包含塊，或 SVG 容器的寬度和高度。在 SVG 的 CSS 中使用 @media 查詢是相對於該容器的，而不是瀏覽器。

css
@media screen and (min-width: 400px) and (max-width: 500px) {
  /* CSS goes here */
}

通常，當您編寫上面的媒體查詢時，如果視窗（通常是瀏覽器視窗）在 400px 到 500px（含）之間，則應用樣式。SVG 中的寬度媒體查詢基於包含 SVG 的元素——如果源是 SVG 檔案，則為 <img>，如果 SVG 直接包含在 HTML 中，則為 SVG 本身，或者如果父元素有寬度分配並且——不是視窗的寬度。如果上面的媒體查詢在我們的 SVG 檔案中，則如果 SVG 容器在 400 到 500px 之間，則應用 CSS。

JavaScript

視覺視窗 API提供了一種查詢和修改視覺視窗屬性的機制。

移動視窗

移動裝置的形狀和尺寸各不相同，螢幕的裝置畫素比也不同。移動瀏覽器的視窗是視窗中可見網頁內容的區域，該區域的大小不一定與渲染的頁面相同。移動瀏覽器通常以 980px 的虛擬視窗或視窗渲染頁面，這通常比螢幕更寬，然後縮小渲染結果以便可以一次看到所有內容。使用者然後可以平移和縮放以檢視頁面的不同區域。例如，如果移動螢幕的寬度為 320px，網站可能會以 980px 的虛擬視窗渲染，然後縮小以適合 320px 的空間，這根據設計對於許多人（如果不是所有人）來說是難以辨認的。為了告訴移動瀏覽器使用視窗寬度而不是預設的 980px 作為螢幕的寬度，開發人員可以包含一個視窗元標記，如下所示

html
<meta name="viewport" content="width=device-width" />

width 屬性控制視窗的大小。它最好設定為 device-width，它是在 100% 比例下螢幕以 CSS 畫素為單位的寬度。還有其他屬性，包括 maximum-scale、minimum-scale 和 user-scalable，它們控制使用者是否可以放大或縮小頁面，但預設值對於可訪問性和使用者體驗來說是最好的，因此可以省略這些屬性。

另請參閱