移動前端第一彈：viewport詳解

前言

此次想聊聊移動開發相關的事。是的，你沒有看錯，一句話就能夠開始你的移動前端開發。

你內心必定在想，什麼話這麼酷，可以瞬間帶入到移動前端開發的世界。

但其實它一點也不新奇，不復雜。

viewport簡介

沒錯，就是viewport特性，一個移動專屬的Meta值，用於定義視口的各類行爲。

該特性最早由Apple引入，用於解決移動端的頁面展現問題，後續被愈來愈多的廠商跟進。

舉個簡單的例子來說爲何會須要它：

咱們知道用戶大規模使用手機等移動設備來進行網頁瀏覽器，其實得益於智能手持設備的興起，也就是近幾年的事。（還記得不久前的幾年，滿大街都仍是諾基亞的天下麼？）

這時有一個很現實的問題擺在了廠商面前，用戶並不能很好地經過手機等設備訪問網頁，由於屏幕過小。

layout viewport

Apple也發現了這個問題，而且適時的出現，它提出了一個方案用來解決這個問題。在iOS Safari中定義了一個viewport meta標籤，用來建立一個虛擬的佈局視口（layout viewport），而這個視口的分辨率接近於PC顯示器，Apple將其定義爲980px（其餘廠商各有不一樣①）。

這就很好的解決了早期的頁面在手機上顯示的問題，因爲二者之間的寬度趨近，CSS只須要像在PC上那樣渲染頁面就行，原有的頁面結構不會被破壞。

①的描述大體以下，數值不必定持續準確，廠商可能更改，但這個絕對值其實並不是特別重要：
iOS, Android基本都是: 980px
BlackBerry: 1024px

visual viewport

有了layout viewport，咱們還須要一個視口用來承載它，這個視口能夠簡單的認爲是手持設備物理屏幕的可視區域，咱們稱之爲（視覺視口）visual viewport。這是一個比較直觀的概念，由於你能看得見你的手機屏幕。

對於visual viewport，開發者通常只須要知道它的存在和概念就行，由於沒法對它進行任何設置或者修改。很明顯，visual viewport的尺寸不會是一個固定的值，甚至每款設備均可能不一樣。大體列幾種常見設備的visual viewport尺寸：

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

以iPhone4S爲例，會在其320px②的visual viewport上，建立一個寬980px的layout viewport，因而用戶能夠在visual viewport中拖動或者縮放網頁，來得到良好的瀏覽效果；佈局視口用來配合CSS渲染布局，當咱們定義一個容器的寬度爲100%時，這個容器的實際寬度是980px而不是320px，經過這種方式大部分網頁就能以縮放的形式正常顯示在手機屏幕上了。

②的描述大體以下：
早期移動前端開發工程師常能見到寬640px的設計稿，緣由就是UI工程師以物理屏幕寬度爲320px的iPhone4-iPhone5S做爲參照設計；
固然，如今你還可能會見到750px和1242px尺寸的設計稿，緣由固然是iPhone6的出現

固然，爲了更好的適配移動端或者只爲移動端設計的應用，單有佈局視口和視覺視口仍是不夠的。

ideal viewport

咱們還須要一個視口，它相似於佈局視口，但寬度和視覺視口相同，這就是完美視口（ideal viewport）。

有了完美視口，用戶不用縮放和拖動網頁就可以很好的進行網頁瀏覽。而完美視口也是經過viewport meta的某種設置來達到。

說了這麼一大堆的東西，貌似都和viewport有關聯，那麼viewport到底怎麼搞，請繼續往下。

關於3個視口，PPK已經作了很是棒的闡釋，你也能夠在StackOverflow上找到一些對此描述的相互補充，例如：[1], [2]，有興趣的童鞋也能夠看看

viewport特性

一般狀況下，viewport有如下6種設置。固然廠商可能會增長一些特定的設置，好比iOS Safari7.1增長了一種在網頁加載時隱藏地址欄與導航欄的設置：minimal-ui，不過隨後又將之移除了。

Name	Value	Description
width	正整數或device-width	定義視口的寬度，單位爲像素
height	正整數或device-height	定義視口的高度，單位爲像素
initial-scale	[0.0-10.0]	定義初始縮放值
minimum-scale	[0.0-10.0]	定義縮小最小比例，它必須小於或等於maximum-scale設置
maximum-scale	[0.0-10.0]	定義放大最大比例，它必須大於或等於minimum-scale設置
user-scalable	yes/no	定義是否容許用戶手動縮放頁面，默認值yes

width

width被用來定義layout viewport的寬度，若是不指定該屬性（或者移除viewport meta標籤），則layout viewport寬度爲廠商默認值。如：iPhone爲980px；

舉個例子：

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

此時的layout viewport將成爲ideal viewport，由於layout viewport寬度與設備視覺視口寬度一致了。

除了width以外，還有一個屬性定義也能實現ideal viewport，那就是initial-scale。

height

與width相似，但實際上卻不經常使用，由於沒有太多的use case。

initial-scale

若是想頁面默認以某個比例放大或者縮小而後呈現給用戶，那麼能夠經過定義initial-scale來完成。

initial-scale用於指定頁面的初始縮放比例，假定你這樣定義：

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

那麼用戶將會看到2倍大小的頁面內容。

在說width的時候，咱們說到initial-scale也能實現ideal viewport，是的，你只須要這樣作，也能夠獲得完美視口：

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

maximum-scale

在移動端，你可能會考慮用戶瀏覽不便，而後給予用戶放大頁面的權利，但同時又但願是在必定範圍內的放大，這時就可使用maximum-scale來進行約束。

maximum-scale用於指定用戶可以放大的比例。

舉個例子來說：

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

假設頁面的默認縮放值initial-scale是1，那麼用戶最終可以將頁面放大到這個初始頁面大小的5倍。

minimum-scale

相似maximum-scale的描述，不過minimum-scale是用來指定頁面縮小比例的。

一般狀況下，爲了有更好地體驗，不會定義該屬性的值比1更小，由於那樣頁面將變得難以閱讀。

user-scalable

若是你不想頁面被放大或者縮小，經過定義user-scalable來約束用戶是否能夠經過手勢對頁面進行縮放便可。

該屬性的默認值爲yes，便可被縮放（若是使用默認值，該屬性能夠不定義）；固然，若是你的應用不打算讓用戶擁有縮放權限，能夠將該值設置爲no。

使用方法以下：

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

結語

正如開篇所說，這既不高深也不新奇，它而僅僅是一點觀念轉變。

當你掌握了viewport，那麼意味着你已經大體瞭解了移動平臺與PC平臺的不一樣，你能夠更專一而細緻的去解決某些平臺差別問題。