viewport視口詳解

admin發表於2018-07-23

本章節介紹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畫素會變少,如果縮小則相反。

相關文章