97人人做人人添人人爱,中文字幕第三页

主頁(yè) > 知識(shí)庫(kù) > HTML5移動(dòng)端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析

HTML5移動(dòng)端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析

移動(dòng)前端中常說的 viewport （視口）就是瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域。其中涉及幾個(gè)重要概念是 dip （ device-independent pixel 設(shè)備邏輯像素）和 CSS 像素之間的關(guān)系。這里首先了解以下幾個(gè)概念。

layout viewport（布局視口）

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

visual viewport（視覺視口）和物理像素

visual viewport（視覺視口）備物理屏幕的可視區(qū)域，屏幕顯示器的物理像素，同樣尺寸的屏幕，像素密度大的設(shè)備，硬件像素會(huì)更多。例如iPhone的物理像素：

iPhone5 ：640 * 1136
iPhone6：750 * 1334
iPhone6 Plus：1242 * 2208
ideal viewport（理想視口）和 dip （設(shè)備邏輯像素）

ideal viewport（理想視口）通常是我們說的屏幕分辨率。

dip （設(shè)備邏輯像素）跟設(shè)備的硬件像素?zé)o關(guān)的。一個(gè) dip 在任意像素密度的設(shè)備屏幕上都占據(jù)相同的空間。

比如MacBook Pro的 Retina （視網(wǎng)膜）屏顯示器硬件像素是：2880 * 1800。當(dāng)你設(shè)置屏幕分辨率為 1920 * 1200 的時(shí)候，ideal viewport（理想視口）的寬度值是1920像素，那么 dip 的寬度值就是1920。設(shè)備像素比是1.5（2880/1920）。設(shè)備的邏輯像素寬度和物理像素寬度（像素分辨率）的關(guān)系滿足如下公式：

邏輯像素寬度*倍率 = 物理像素寬度

而移動(dòng)端手機(jī)屏幕通常不可以設(shè)置分辨率，一般都是設(shè)備廠家默認(rèn)設(shè)置的固定值，換句話說 dip 的值就是 ideal viewport（理想視口）（也就是分辨率）的值，比如，iPhone的屏幕分辨率：

iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x
iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x，（注意，實(shí)際顯示圖像等比降低至1080×1920，具體原因我們文章最后會(huì)附帶介紹）

CSS像素

CSS像素（px）用于頁(yè)面布局的單位。樣式的像素尺寸（例如 width: 100px）是以CSS像素為單位指定的。CSS像素與 dip 的比例即為網(wǎng)頁(yè)的縮放比例，如果網(wǎng)頁(yè)沒有縮放，那么一個(gè)CSS像素就對(duì)應(yīng)一個(gè) dip（設(shè)備邏輯像素）。

使用viewport元標(biāo)簽控制布局

首先看一下viewport元標(biāo)簽極其屬性：

CSS Code復(fù)制內(nèi)容到剪貼板

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

這里是每個(gè)屬性的詳細(xì)介紹：

屬性名	取值	描述
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	定義是否允許用戶手動(dòng)縮放頁(yè)面，默認(rèn)值yes

width

width屬性被用來控制layout viewport（布局視口）的寬度，layout viewport（布局視口）寬度默認(rèn)值是設(shè)備廠家指定的。iOS, Android基本都將這個(gè)視口分辨率設(shè)置為 980px。我們可以 width=320 這樣設(shè)為確切的像素?cái)?shù)，也可以設(shè)為device-width這一特殊值，一般為了自適應(yīng)布局，普遍的做法是將width設(shè)置為device-width，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

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

width=device-width 也就是將layout viewport（布局視口）的寬度設(shè)置 ideal viewport（理想視口）的寬度。網(wǎng)頁(yè)縮放比例為100%時(shí)，一個(gè)CSS像素就對(duì)應(yīng)一個(gè) dip（設(shè)備邏輯像素），而layout viewport（布局視口）的寬度，ideal viewport（理想視口）的寬度（通常說的分辨率），dip 的寬度值是相等的。

height

與width類似，但實(shí)際上卻不常用。

initial-scale

initial-scale用于指定頁(yè)面的初始縮放比例：

CSS Code復(fù)制內(nèi)容到剪貼板

<meta name="viewport" content="initial-scale=1.5" />

initial-scale=1 表示將layout viewport（布局視口）的寬度設(shè)置為 ideal viewport（理想視口）的寬度，initial-scale=1.5 表示將layout viewport（布局視口）的寬度設(shè)置為 ideal viewport（理想視口）的寬度的1.5倍。

maximum-scale

maximum-scale用于指定用戶能夠放大的最大比例，例如

CSS Code復(fù)制內(nèi)容到剪貼板

<meta name="viewport" content="initial-scale=1,maximum-scale=3" />

假設(shè)頁(yè)面的默認(rèn)縮放值initial-scale是1，那么用戶最終能夠?qū)㈨?yè)面放大到這個(gè)初始頁(yè)面大小的3倍。

minimum-scale

類似maximum-scale的描述，不過minimum-scale是用來指定頁(yè)面縮小比例的。通常情況下，不會(huì)定義該屬性的值，頁(yè)面太小將難以閱讀。

user-scalable

user-scalable來控制用戶是否可以通過手勢(shì)對(duì)頁(yè)面進(jìn)行縮放。該屬性的默認(rèn)值為yes，可被縮放，你也可以將該值設(shè)置為no，表示不允許用戶縮放網(wǎng)頁(yè)。例如：

CSS Code復(fù)制內(nèi)容到剪貼板

<meta name="viewport" content="user-scalable=no" />

PS：關(guān)于iPhone 的屏幕分辨率
iPhone 6 Plus 官方標(biāo)稱屏幕是 1920 x 1080 的，但是在 Xcode 中我們發(fā)現(xiàn)模擬器的屏幕其實(shí)是看似奇怪的 2208 × 1242，為什么呢？

這個(gè)縮小 17% 的比例是這么來的呢？來看 Stack Overflow 上的回答：iPhone 6 Plus resolution confusion: Xcode or Apple’s website? ，簡(jiǎn)單來說就是為了切圖的放大倍數(shù)、實(shí)際渲染像素都是正整數(shù)。

標(biāo)簽：晉中撫州玉溪邯鄲內(nèi)蒙古牡丹江安慶煙臺(tái)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML5移動(dòng)端開發(fā)中的Viewport標(biāo)簽及相關(guān)CSS用法解析》，本文關(guān)鍵詞 HTML5,移動(dòng),端,開發(fā),中的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。