web頁面中的布局位置到底是什么?

來源：千鋒教育

發布人：xqq

時間： 2023-10-11 17:42:46 1697017366

一、web頁面中的布局位置

viewport 是瀏覽器視口，代表瀏覽器的可視區域，也就是瀏覽器中用來顯示網頁的那部分區域。在桌面電腦上，由外到內分為顯示器窗口、瀏覽器窗口、瀏覽器視口 (viewport)、元素。

顯示器窗口

顯示器窗口就是你的顯示器屏幕的可見區域。顯示器的分辨率，描述的是顯示器窗口的設備像素，又叫做物理像素，通過 screen.width 來表示水平方向的物理像素，screen.height 來表示垂直方向的物理像素。比如一臺分辨率為 1920 * 1080 的顯示器，它的 screen.width 為 1920，screen.height 為 1080。screen.width 和 screen.height 是固定的，不可以改變。

瀏覽器窗口

瀏覽器窗口就是瀏覽器中用來顯示網頁的可見區域，不包括工具欄的部分，但是包括水平滾動條和垂直滾動條 (只包括滾動條本身所占的像素，不包括已滾動的網頁部分)。

瀏覽器視口

viewport 就是瀏覽器視口，瀏覽器視口和瀏覽器窗口類似，只不過不包括水平滾動條和垂直滾動條。如果網頁里沒有滾動條，則瀏覽器視口和瀏覽器窗口的大小一樣。通過 document.documentElement.clientWidth 來表示瀏覽器視口水平方向能夠顯示的 CSS 像素數，document.documentElement.clientHeight 來表示瀏覽器視口垂直方向能夠顯示的 CSS 像素數。如果沒有滾動條，document.documentElement.clientWidth 和 window.innerWidth 相等。如果有滾動條，window.innerWidth = document.documentElement.clientWidth + 垂直滾動條所占的寬度。document.documentElement.clientWidth 和 document.documentElement.clientHeight 是可變的，通過拉伸或者縮放瀏覽器可以改變。

元素

HTML 文檔中，元素是文檔根元素，通過 document.documentElement 來表示元素。元素所占的 CSS 寬度和高度，用 document.documentElement.offsetWidth 和 document.documentElement.offsetHeight 來顯示。

縮放瀏覽器

通過百分比縮放瀏覽器的時候，并沒有改變瀏覽器的物理尺寸，但是改變了 CSS 像素的物理尺寸。viewport 所能夠展示的 CSS 像素數也會發生改變，因此 document.documentElement.clientWidth 和 window.innerWidth 就會改變。

比如我們把顯示器放大到 200%，網頁中的元素尺寸都放大一倍，但是元素的 CSS 像素值不會改變。比如某個元素的 width: 100px;，不管是瀏覽器放大顯示還是縮小顯示，該元素的 CSS 像素是不會變的，永遠都是 width: 100px;，變化的是該元素在顯示器上所占的物理尺寸。當瀏覽器放大 200% 顯示網頁的時候，1px CSS 像素的物理尺寸也會放大一倍。

舉例子：

點擊瀏覽器的放大按鈕放大到 200% 顯示網頁的時候，雖然瀏覽器的物理尺寸沒有變化，但是 1px CSS 像素的物理尺寸擴大了一倍，因此瀏覽器 viewport 能夠展示的 CSS 像素數就會縮小一倍。因此不縮放時，viewport 為 1000px，放大 200% 之后，viewport 為 500px，也就是說放大后 viewport 水平方向能夠展示的 CSS 像素數為 500px。同理，點擊瀏覽器的縮小按鈕縮小到 50% 顯示網頁的時候，viewport 為 2000px，也就是說縮小后 viewport 水平方向能夠展示的 CSS 像素數為 4000px。

延伸閱讀：

二、網頁可見區域是什么

網頁可見區域寬： document.body.clientWidth;

網頁可見區域高： document.body.clientHeight;

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);

網頁可見區域高： document.body.offsetHeight (包括邊線的高);

網頁正文全文寬： document.body.scrollWidth;

網頁正文全文高： document.body.scrollHeight;

網頁被卷去的高： document.body.scrollTop;

網頁被卷去的左： document.body.scrollLeft;

網頁正文部分上： window.screenTop;

網頁正文部分左： window.screenLeft;