一、web頁(yè)面中的布局位置

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

顯示器窗口

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

瀏覽器窗口

瀏覽器窗口就是瀏覽器中用來(lái)顯示網(wǎng)頁(yè)的可見(jiàn)區(qū)域，不包括工具欄的部分，但是包括水平滾動(dòng)條和垂直滾動(dòng)條 (只包括滾動(dòng)條本身所占的像素，不包括已滾動(dòng)的網(wǎng)頁(yè)部分)。

瀏覽器視口

viewport 就是瀏覽器視口，瀏覽器視口和瀏覽器窗口類(lèi)似，只不過(guò)不包括水平滾動(dòng)條和垂直滾動(dòng)條。如果網(wǎng)頁(yè)里沒(méi)有滾動(dòng)條，則瀏覽器視口和瀏覽器窗口的大小一樣。通過(guò) document.documentElement.clientWidth 來(lái)表示瀏覽器視口水平方向能夠顯示的 CSS 像素?cái)?shù)，document.documentElement.clientHeight 來(lái)表示瀏覽器視口垂直方向能夠顯示的 CSS 像素?cái)?shù)。如果沒(méi)有滾動(dòng)條，document.documentElement.clientWidth 和 window.innerWidth 相等。如果有滾動(dòng)條，window.innerWidth = document.documentElement.clientWidth + 垂直滾動(dòng)條所占的寬度。document.documentElement.clientWidth 和 document.documentElement.clientHeight 是可變的，通過(guò)拉伸或者縮放瀏覽器可以改變。

元素

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

縮放瀏覽器

通過(guò)百分比縮放瀏覽器的時(shí)候，并沒(méi)有改變?yōu)g覽器的物理尺寸，但是改變了 CSS 像素的物理尺寸。viewport 所能夠展示的 CSS 像素?cái)?shù)也會(huì)發(fā)生改變，因此 document.documentElement.clientWidth 和 window.innerWidth 就會(huì)改變。

比如我們把顯示器放大到 200%，網(wǎng)頁(yè)中的元素尺寸都放大一倍，但是元素的 CSS 像素值不會(huì)改變。比如某個(gè)元素的 width: 100px;，不管是瀏覽器放大顯示還是縮小顯示，該元素的 CSS 像素是不會(huì)變的，永遠(yuǎn)都是 width: 100px;，變化的是該元素在顯示器上所占的物理尺寸。當(dāng)瀏覽器放大 200% 顯示網(wǎng)頁(yè)的時(shí)候，1px CSS 像素的物理尺寸也會(huì)放大一倍。

舉例子：

點(diǎn)擊瀏覽器的放大按鈕放大到 200% 顯示網(wǎng)頁(yè)的時(shí)候，雖然瀏覽器的物理尺寸沒(méi)有變化，但是 1px CSS 像素的物理尺寸擴(kuò)大了一倍，因此瀏覽器 viewport 能夠展示的 CSS 像素?cái)?shù)就會(huì)縮小一倍。因此不縮放時(shí)，viewport 為 1000px，放大 200% 之后，viewport 為 500px，也就是說(shuō)放大后 viewport 水平方向能夠展示的 CSS 像素?cái)?shù)為 500px。同理，點(diǎn)擊瀏覽器的縮小按鈕縮小到 50% 顯示網(wǎng)頁(yè)的時(shí)候，viewport 為 2000px，也就是說(shuō)縮小后 viewport 水平方向能夠展示的 CSS 像素?cái)?shù)為 4000px。

延伸閱讀：

二、網(wǎng)頁(yè)可見(jiàn)區(qū)域是什么

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth;

網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight;

網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);

網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的高);

網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth;

網(wǎng)頁(yè)正文全文高： document.body.scrollHeight;

網(wǎng)頁(yè)被卷去的高： document.body.scrollTop;

網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft;

網(wǎng)頁(yè)正文部分上： window.screenTop;

網(wǎng)頁(yè)正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區(qū)高度： window.screen.availHeight;

對(duì)塊級(jí)元素來(lái)說(shuō)，offsetTop、offsetLeft、offsetWidth?及?offsetHeight?描述了元素相對(duì)于?offsetParent?的邊界框