一、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;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的寬: window.screen.width;
屏幕可用工作區高度: window.screen.availHeight;
對塊級元素來說,offsetTop、offsetLeft、offsetWidth?及?offsetHeight?描述了元素相對于?offsetParent?的邊界框