移動(dòng)前端第一彈：viewport詳解

移動(dòng)前端第一彈：viewport詳解

原作者：doyoe
原文鏈接：http://blog.doyoe.com/2015/10/13/mobile/%E7%A7%BB%E5%8A%A8%E5%89%8D%E7%AB%AF%E7%AC%AC%E4%B8%80%E5%BC%B9%EF%BC%9Aviewport%E8%AF%A6%E8%A7%A3/

前言

這次想聊聊移動(dòng)開(kāi)發(fā)相關(guān)的事。是的，你沒(méi)有看錯(cuò)，一句話就可以開(kāi)始你的移動(dòng)前端開(kāi)發(fā)。

你心里一定在想，什么話這么酷，能夠瞬間帶入到移動(dòng)前端開(kāi)發(fā)的世界。

但其實(shí)它一點(diǎn)也不新奇，不復(fù)雜。

viewport簡(jiǎn)介

沒(méi)錯(cuò)，就是viewport特性，一個(gè)移動(dòng)專屬的Meta值，用于定義視口的各種行為。

該特性最先由Apple引入，用于解決移動(dòng)端的頁(yè)面展示問(wèn)題，后續(xù)被越來(lái)越多的廠商跟進(jìn)。

舉個(gè)簡(jiǎn)單的例子來(lái)講為什么會(huì)需要它：
我們知道用戶大規(guī)模使用手機(jī)等移動(dòng)設(shè)備來(lái)進(jìn)行網(wǎng)頁(yè)瀏覽器，其實(shí)得益于智能手持設(shè)備的興起，也就是近幾年的事。（還記得不久前的幾年，滿大街都還是諾基亞的天下么？）

這時(shí)有一個(gè)很現(xiàn)實(shí)的問(wèn)題擺在了廠商面前，用戶并不能很好地通過(guò)手機(jī)等設(shè)備訪問(wèn)網(wǎng)頁(yè)，因?yàn)槠聊惶　?/p>

layout viewport

Apple也發(fā)現(xiàn)了這個(gè)問(wèn)題，并且適時(shí)的出現(xiàn)，它提出了一個(gè)方案用來(lái)解決這個(gè)問(wèn)題。在iOS Safari中定義了一個(gè)viewport meta標(biāo)簽，用來(lái)創(chuàng)建一個(gè)虛擬的布局視口（layout viewport），而這個(gè)視口的分辨率接近于PC顯示器，Apple將其定義為980px（其他廠商各有不同①）。

這就很好的解決了早期的頁(yè)面在手機(jī)上顯示的問(wèn)題，由于兩者之間的寬度趨近，CSS只需要像在PC上那樣渲染頁(yè)面就行，原有的頁(yè)面結(jié)構(gòu)不會(huì)被破壞。

①的描述大致如下，數(shù)值不一定持續(xù)準(zhǔn)確，廠商可能更改，但這個(gè)絕對(duì)值其實(shí)并非特別重要：
iOS, Android基本都是: 980px
BlackBerry: 1024px

visual viewport

有了layout viewport，我們還需要一個(gè)視口用來(lái)承載它，這個(gè)視口可以簡(jiǎn)單的認(rèn)為是手持設(shè)備物理屏幕的可視區(qū)域，我們稱之為（視覺(jué)視口）visual viewport。這是一個(gè)比較直觀的概念，因?yàn)槟隳芸吹靡?jiàn)你的手機(jī)屏幕。

對(duì)于visual viewport，開(kāi)發(fā)者一般只需要知道它的存在和概念就行，因?yàn)闊o(wú)法對(duì)它進(jìn)行任何設(shè)置或者修改。很明顯，visual viewport的尺寸不會(huì)是一個(gè)固定的值，甚至每款設(shè)備都可能不同。大致列幾種常見(jiàn)設(shè)備的visual viewport尺寸：

• iPhone4~iPhone5S: 320*480px
• iPhone6~iPhone6S: 375*627px
• iPhone6 Plus~iPhone6S Plus: 414*736px

以iPhone4S為例，會(huì)在其320px②的visual viewport上，創(chuàng)建一個(gè)寬980px的layout viewport，于是用戶可以在visual viewport中拖動(dòng)或者縮放網(wǎng)頁(yè)，來(lái)獲得良好的瀏覽效果；布局視口用來(lái)配合CSS渲染布局，當(dāng)我們定義一個(gè)容器的寬度為100%時(shí)，這個(gè)容器的實(shí)際寬度是980px而不是320px，通過(guò)這種方式大部分網(wǎng)頁(yè)就能以縮放的形式正常顯示在手機(jī)屏幕上了。

②的描述大致如下：
早期移動(dòng)前端開(kāi)發(fā)工程師常能見(jiàn)到寬640px的設(shè)計(jì)稿，原因就是UI工程師以物理屏幕寬度為320px的iPhone4-iPhone5S作為參照設(shè)計(jì)；
當(dāng)然，現(xiàn)在你還可能會(huì)見(jiàn)到750px和1242px尺寸的設(shè)計(jì)稿，原因當(dāng)然是iPhone6的出現(xiàn)

當(dāng)然，為了更好的適配移動(dòng)端或者只為移動(dòng)端設(shè)計(jì)的應(yīng)用，單有布局視口和視覺(jué)視口還是不夠的。

ideal viewport

我們還需要一個(gè)視口，它類似于布局視口，但寬度和視覺(jué)視口相同，這就是完美視口（ideal viewport）。

有了完美視口，用戶不用縮放和拖動(dòng)網(wǎng)頁(yè)就能夠很好的進(jìn)行網(wǎng)頁(yè)瀏覽。而完美視口也是通過(guò)viewport meta的某種設(shè)置來(lái)達(dá)到。

說(shuō)了這么一大堆的東西，貌似都和viewport有關(guān)聯(lián)，那么viewport到底怎么搞，請(qǐng)繼續(xù)往下。

關(guān)于3個(gè)視口，PPK已經(jīng)做了非常棒的闡釋，你也可以在StackOverflow上找到一些對(duì)此描述的相互補(bǔ)充，例如：[1], [2]，有興趣的童鞋也可以看看

viewport特性

通常情況下，viewport有以下6種設(shè)置。當(dāng)然廠商可能會(huì)增加一些特定的設(shè)置，比如iOS Safari7.1增加了一種在網(wǎng)頁(yè)加載時(shí)隱藏地址欄與導(dǎo)航欄的設(shè)置：minimal-ui，不過(guò)隨后又將之移除了。

width

width被用來(lái)定義layout viewport的寬度，如果不指定該屬性（或者移除viewport meta標(biāo)簽），則layout viewport寬度為廠商默認(rèn)值。如：iPhone為980px；

舉個(gè)例子：

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

此時(shí)的layout viewport將成為ideal viewport，因?yàn)?code>layout viewport寬度與設(shè)備視覺(jué)視口寬度一致了。

除了width之外，還有一個(gè)屬性定義也能實(shí)現(xiàn)ideal viewport，那就是initial-scale。

height

與width類似，但實(shí)際上卻不常用，因?yàn)闆](méi)有太多的use case。

initial-scale

如果想頁(yè)面默認(rèn)以某個(gè)比例放大或者縮小然后呈現(xiàn)給用戶，那么可以通過(guò)定義initial-scale來(lái)完成。

initial-scale用于指定頁(yè)面的初始縮放比例，假定你這樣定義：

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

那么用戶將會(huì)看到2倍大小的頁(yè)面內(nèi)容。

在說(shuō)width的時(shí)候，我們說(shuō)到initial-scale也能實(shí)現(xiàn)ideal viewport，是的，你只需要這樣做，也可以得到完美視口：

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

maximum-scale

在移動(dòng)端，你可能會(huì)考慮用戶瀏覽不便，然后給予用戶放大頁(yè)面的權(quán)利，但同時(shí)又希望是在一定范圍內(nèi)的放大，這時(shí)就可以使用maximum-scale來(lái)進(jìn)行約束。

maximum-scale用于指定用戶能夠放大的比例。

舉個(gè)例子來(lái)講：

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

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

minimum-scale

類似maximum-scale的描述，不過(guò)minimum-scale是用來(lái)指定頁(yè)面縮小比例的。

通常情況下，為了有更好地體驗(yàn)，不會(huì)定義該屬性的值比1更小，因?yàn)槟菢禹?yè)面將變得難以閱讀。

user-scalable

如果你不想頁(yè)面被放大或者縮小，通過(guò)定義user-scalable來(lái)約束用戶是否可以通過(guò)手勢(shì)對(duì)頁(yè)面進(jìn)行縮放即可。
該屬性的默認(rèn)值為yes，即可被縮放（如果使用默認(rèn)值，該屬性可以不定義）；當(dāng)然，如果你的應(yīng)用不打算讓用戶擁有縮放權(quán)限，可以將該值設(shè)置為no。

使用方法如下：

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

結(jié)語(yǔ)

正如開(kāi)篇所說(shuō)，這既不高深也不新奇，它而僅僅是一點(diǎn)觀念轉(zhuǎn)變。

當(dāng)你掌握了viewport，那么意味著你已經(jīng)大致了解了移動(dòng)平臺(tái)與PC平臺(tái)的不同，你可以更專注而細(xì)致的去解決某些平臺(tái)差異問(wèn)題。