viewport視口詳解

admin發表於2018-07-23
View

本章節介紹viewport視口的概念，不是<meta name="viewport">，此meta標籤是用來控制移動端視口。

關於<meta name="viewport">使用可以參閱meta viewport用法一章節。

關於畫素相關知識可以參閱裝置畫素、獨立畫素和css畫素一章節。

一.viewport視口：

所謂視口是瀏覽器上顯示網頁的一塊區域，大小並不侷限於瀏覽器可視區域範圍，可能比此區域大也可能小。

PC端與移動端視口差別較大，但有一點是相同的，<html>元素的容器是視口，預設會在橫向填充滿整個視口。

（1）.PC端視口：

在PC端，視口大小就是瀏覽器視窗可視區域的大小，無論瀏覽器是否縮放。

通過window.innerWidth可以獲取視口的寬度，具體參閱window.innerWidth一章節。

（2）.移動端：

移動端，視口的表現比較複雜。

如果一個頁面沒有對移動端做優化，它的表現會類似於下面截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201807/23/233706koveuuxhl9o99vzl.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是phpwind官網，沒有針對移動端做任何的優化。

手機的螢幕能完整容納下如此大的頁面，不會出現滾動條，原因如下：

由於移動端屏解析度通常比PC端要小的多，為了能夠在移動端正常顯示專門為PC端設計的頁面，通常移動裝置瀏覽器會將viewport視口的寬度設定為768px ~1024px之間，最為常見的是980px，當然也可能是其他值，具體由瀏覽器決定。

問題答疑：

（1）.既然視口寬度預設768px ~1024px，為什麼沒有出現橫向滾動條：

例如上圖，手機的裝置獨立畫素是375px*812px，視口的預設寬度至少是980px，橫向沒有出現滾動條是因為視口自行進行了縮放，將網頁內容儘可能容納於瀏覽器視窗內。

（2）.視口的縮放是否是無限度的：

縮放不是無限的，如果頁面非常寬的話，也會出現橫向滾動條。

總結：PC端，視口寬度始終與瀏覽器視窗寬度一致，  而移動端視口與瀏覽器視窗寬度是完全獨立的。

二.viewport視口深入介紹:

為了便於理解，移動端可以將視口劃分為三類，佈局視口，視覺視口和完美視口。

（1）.佈局視口：

佈局視口在上面已經介紹，預設狀態下，寬度介於768px ~1024px之間，不進行縮放的話，比瀏覽器視窗要大。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/23/233723tys3jy399kvv9j68.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過如下JavaScript程式碼可以獲取佈局視口的寬度：

[JavaScript] 純文字檢視 複製程式碼
document.documentElement.clientWidth //佈局視口的寬度
document.documentElement.clientHeight //佈局視口的高度

（2）.視覺視口：

視覺視口是使用者正在看到的網頁的區域，大小是螢幕中CSS畫素的數量。

圖示如下：

a:3:{s:3:\"pic\";s:43:\"portal/201807/23/233739mtttzc5heh5rayre.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通過如下JavaScript程式碼可以獲取視覺視口的尺寸：

[JavaScript] 純文字檢視 複製程式碼
window.innerWidth //視口的寬度
window.innerHeight //視口的高度

頁面縮放會對視覺視口的尺寸產生影響，由於視覺視口是CSS畫素數量，那麼當頁面放大一倍的時候，CSS畫素點的體積會變大一倍，視口內的畫素數量就會減少一倍，如果縮小，恰好相反。

（3）.完美視口：

佈局視口對使用者不友好，沒有考慮到手機尺寸，所以蘋果公司引入完美視口概念，它是對裝置來說最理想的佈局視口尺寸，使用者進入頁面不需要縮放。採用如下程式碼可以將佈局視口尺寸設定為理理想尺寸：

[HTML] 純文字檢視 複製程式碼
<meta name="viewport" content="width=device-width">

將佈局視口的寬度設定為裝置獨立畫素的寬度；通過如下程式碼可以獲取裝置獨立畫素的尺寸：

[JavaScript] 純文字檢視 複製程式碼
screen.width //裝置獨立畫素寬度
screen.height //裝置獨立畫素高度

三.縮放：

首先強調如下幾點：

（1）.裝置出廠後，裝置畫素是恆定不變的。

（2）.理論上裝置獨立畫素是可以調節的，但絕少有人這麼做，所以也可以認為是固定不變的。

我們所說的縮放都是對CSS畫素的操作，所以當我們對頁面進行縮放的時候，會有如下變化：

（1）.佈局視口的CSS畫素數量是不變的，只是體積發生了變化，所以在視覺上變大或者變小。

（2）.當頁面放大的時候，由於CSS畫素體積變大，所以視覺視口內CSS畫素會變少，如果縮小則相反。

相關文章