有声,新寡妇村传奇

主頁 > 知識庫 > 淺談移動端中的視口(viewport)的具體使用

淺談移動端中的視口(viewport)的具體使用

1. 基本概念

1.1 兩種像素

像素是計算機屏幕中顯示特定顏色的最小區(qū)域。屏幕中的像素越多，同一范圍內(nèi)能看到的內(nèi)容就越多?；蛘哒f，當設(shè)備尺寸相同時，像素越密集，畫面就越精細。

那么，當我們在 CSS 中為一個元素設(shè)置屬性 width: 250px; 時，會發(fā)生什么？這個元素的寬度究竟是多少像素呢？

事實上，這里已經(jīng)涉及了兩種不同的像素：物理像素和 CSS 像素。

物理像素（設(shè)備像素，device pixels）

指的是設(shè)備屏幕的物理像素，任何設(shè)備的物理像素數(shù)量都是固定的。

CSS 像素（CSS pixels）

是 CSS 和 JS 中使用的一個抽象概念。它和物理像素之間的比例取決于屏幕的特性（是否為高密度）以及用戶進行的縮放，由瀏覽器自行換算。

在 Apple 的視網(wǎng)膜屏（Retina）中，每 4 個像素為一組，渲染出普通屏幕中一個像素顯示區(qū)域內(nèi)的圖像，從而實現(xiàn)更為精細的顯示效果。此時， 250px 的元素跨越了 500 個物理像素的寬度。

如果用戶進行了放大，那么一個 CSS 像素還將跨越更多的物理像素。

1.2 三種視口

移動端瀏覽器通常寬度是 240px~640px，而大多數(shù)為 PC 端設(shè)計的網(wǎng)站寬度至少為 800px，如果仍以瀏覽器窗口作為視口的話，網(wǎng)站內(nèi)容在手機上看起來會非常窄。

因此，引入了布局視口、視覺視口和理想視口三個概念，使得移動端中的視口與瀏覽器寬度不再相關(guān)聯(lián)。

布局視口（layout viewport）

一般移動設(shè)備的瀏覽器都默認設(shè)置了一個 viewport 元標簽，定義一個虛擬的布局視口（layout viewport），用于解決早期的頁面在手機上顯示的問題。iOS, Android 基本都將這個視口分辨率設(shè)置為 980px，所以 PC 上的網(wǎng)頁基本能在手機上呈現(xiàn)，只不過元素看上去很小，一般默認可以通過手動縮放網(wǎng)頁。

布局視口的寬度/高度可以通過 document.documentElement.clientWidth / Height 獲取。

可以看到，默認的布局視口寬度為 980px。如果要顯式設(shè)置布局視口，可以使用 HTML 中的 meta 標簽：

<meta name="viewport" content="width=400">

布局視口使視口與移動端瀏覽器屏幕寬度完全獨立開。CSS 布局將會根據(jù)它來進行計算，并被它約束。

視覺視口（visual viewport）

視覺視口是用戶當前看到的區(qū)域，用戶可以通過縮放操作視覺視口，同時不會影響布局視口。

視覺視口和縮放比例的關(guān)系為：當前縮放值 = 理想視口寬度 / 視覺視口寬度

所以，當用戶放大時，視覺視口將會變小，CSS 像素將跨越更多的物理像素。

理想視口（ideal viewport）

布局視口的默認寬度并不是一個理想的寬度，于是 Apple 和其他瀏覽器廠商引入了理想視口的概念，它對設(shè)備而言是最理想的布局視口尺寸。顯示在理想視口中的網(wǎng)站具有最理想的寬度，用戶無需進行縮放。

理想視口的值其實就是屏幕分辨率的值，它對應(yīng)的像素叫做設(shè)備邏輯像素（device independent pixel, dip）。dip 和設(shè)備的物理像素無關(guān)，一個 dip 在任意像素密度的設(shè)備屏幕上都占據(jù)相同的空間。如果用戶沒有進行縮放，那么一個 CSS 像素就等于一個 dip。

用下面的方法可以使布局視口與理想視口的寬度一致：

<meta name="viewport" content="width=device-width">

實際上，這就是響應(yīng)式布局的基礎(chǔ)。

2. 視口的設(shè)置

我們可以使用視口元標簽（viewport meta 標簽）來進行布局視口的設(shè)置。

<meta name="viewport"
    content="width=device-width,initial-scale=1.0,maximum-scale=1">

下面是每個屬性的詳細說明：

屬性名	取值	描述
width	正整數(shù)或device-width	定義視口的寬度，單位為像素
height	正整數(shù)或device-height	定義視口的高度，單位為像素，一般不用
initial-scale	[0.0-10.0]	定義初始縮放值
minimum-scale	[0.0-10.0]	定義放大最大比例，它必須小于或等于maximum-scale設(shè)置
maximum-scale	[0.0-10.0]	定義縮小最小比例，它必須大于或等于minimum-scale設(shè)置
user-scalable	yes / no	定義是否允許用戶手動縮放頁面，默認值 yes

有幾點值得注意：

viewport 標簽只對移動端瀏覽器有效，對 PC 端瀏覽器是無效的
當縮放比例為 100% 時，dip 寬度 = CSS 像素寬度 = 理想視口的寬度 = 布局視口的寬度
單獨設(shè)置 initial-scale 或 width 都會有兼容性問題，所以設(shè)置布局視口為理想視口的最佳方法是同時設(shè)置這兩個屬性
即使設(shè)置了 user-scalable = no，在 Android Chrome 瀏覽器中也可以強制啟用手動縮放

3. 一倍圖、二倍圖、三倍圖

MacBook Pro 視網(wǎng)膜屏（Retina）顯示器硬件像素是 2880px * 1800px。當設(shè)置屏幕分辨率為 1920px * 1200px 的時候，理想視口的寬度值是 1920px，那么 dip 的寬度值就是 1920px。其與理想視口寬度的比值為1.5（2880/1920），這個比值叫做設(shè)備像素比：邏輯像素寬度 * 設(shè)備像素比 = 物理像素寬度

設(shè)備像素比可以通過 window.devicePixelRatio 來獲取，或者使用 CSS 中的 device-pixel-ratio。

下面是常見的設(shè)備像素比：

普通密度桌面顯示屏：devicePixelRatio = 1
高密度桌面顯示屏(Mac Retina)：devicePixelRatio = 2
主流手機顯示屏：devicePixelRatio = 2 or 3

對于一張 100px * 100px 的圖片，通過 CSS 設(shè)置其寬高：

{
    width:100px;
    height:100px;
}

在普通顯示屏的電腦中打開是正常的，但假設(shè)在手機或 Retina 屏中打開，按照邏輯分辨率來渲染，他們的 devicePixelRatio = 2，那么就相當于拿 4 個物理像素來描繪 1 個電子像素。這等于拿一個2倍的放大鏡去看圖片，圖片就會變得模糊。

這時，就需要使用 @2x 甚至 @3x 圖來避免圖片的失真。

到此這篇關(guān)于淺談移動端中的視口(viewport)的具體使用的文章就介紹到這了,更多相關(guān)移動端視口內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

標簽：湘西綏化無錫銅陵欽州湖北焦作試駕邀約

巨人網(wǎng)絡(luò)通訊聲明：本文標題《淺談移動端中的視口(viewport)的具體使用》，本文關(guān)鍵詞淺談,移動,端,中的,視口,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。