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

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

但其實它一點也不新奇，不復(fù)雜。

viewport簡介

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

該特性最先由Apple引入，用于解決移動端的頁面展示問題，后續(xù)被越來越多的廠商跟進。

舉個簡單的例子來講為什么會需要它：

我們知道用戶大規(guī)模使用手機等移動設(shè)備來進行網(wǎng)頁瀏覽器，其實得益于智能手持設(shè)備的興起，也就是近幾年的事。（還記得不久前的幾年，滿大街都還是諾基亞的天下么？）

這時有一個很現(xiàn)實的問題擺在了廠商面前，用戶并不能很好地通過手機等設(shè)備訪問網(wǎng)頁，因為屏幕太小。

layout viewport (布局視口)

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

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

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

visual viewport (視覺視口)

有了layout viewport(布局視口)，我們還需要一個視口用來承載它，這個視口可以簡單的認為是手持設(shè)備物理屏幕的可視區(qū)域，我們稱之為（視覺視口）visual viewport。這是一個比較直觀的概念，因為你能看得見你的手機屏幕。

對于visual viewport，開發(fā)者一般只需要知道它的存在和概念就行，因為無法對它進行任何設(shè)置或者修改。很明顯，visual viewport的尺寸不會是一個固定的值，甚至每款設(shè)備都可能不同。大致列幾種常見設(shè)備的visual viewport尺寸：

• iPhone4: 320*480px

• iPhone5/SE: 320*568px

• iPhone6/6s/7/8: 375*667px

• iPhone6/6s/7/8Plus: 414*736px

• iPhoneX: 375*812px

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

②的描述大致如下： 早期移動前端開發(fā)工程師常能見到寬640px的設(shè)計稿，原因就是UI工程師以物理屏幕寬度為320px的iPhone4-iPhone5S作為參照設(shè)計； 當(dāng)然，現(xiàn)在你還可能會見到750px和1242px尺寸的設(shè)計稿，原因當(dāng)然是iPhone6的出現(xiàn) 當(dāng)然，為了更好的適配移動端或者只為移動端設(shè)計的應(yīng)用，單有布局視口和視覺視口還是不夠的。

ideal viewport(完美視口)

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

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

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

viewport特性

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

width

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

舉個例子：

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

此時的layout viewport(布局視口)將成為ideal viewport(完美視口)，因為layout viewport(布局視口)寬度與設(shè)備視覺視口(visual viewport)寬度一致了。

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

height

與width類似，但實際上卻不常用，因為沒有太多的use case(使用案例)。

initial-scale

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

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

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

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

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

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

maximum-scale

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

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

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

頁面的默認縮放值initial-scale是1，用戶最終能夠?qū)㈨撁娣糯蟮竭@個初始頁面大小的5倍。

minimum-scale

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

通常情況下，為了有更好地體驗，不會定義該屬性的值比1更小，因為那樣頁面將變得難以閱讀。

user-scalable

如果你不想頁面被放大或者縮小，通過定義user-scalable來約束用戶是否可以通過手勢對頁面進行縮放即可。

該屬性的默認值為yes，即可被縮放（如果使用默認值，該屬性可以不定義）；當(dāng)然，如果你的應(yīng)用不打算讓用戶擁有縮放權(quán)限，可以將該值設(shè)置為no。

使用方法如下：

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

結(jié)語

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

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

總結(jié)

在移動端，無論你給viewport設(shè)置寬多少，如果沒有指定默認的縮放值，則移動端瀏覽器會自動計算這個縮放值，以達到當(dāng)前頁面不會出現(xiàn)橫向滾動條（或者說，viewport的寬度就是屏幕的寬度）

如果什么都還沒搞懂，也沒關(guān)系，會設(shè)置viewport就可以了，不影響我們開發(fā)移動端，當(dāng)然，理解了解這些概念才能體現(xiàn)出我們的專業(yè)，一開始不是很理解的，先這樣用，之后看多幾次理解。

第一種情況 推薦使用

設(shè)置layout viewport(布局視口)等于設(shè)備視覺視口(visual viewport)寬度， 此時給頁面設(shè)置百分比布局

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

第二種情況

設(shè)置layout viewport(布局視口)固定寬度, 此時不可以設(shè)置 initial-scale，max-scale，min-scale, 利用手機的自動縮放來使用手機屏幕， 此時的元素100%寬度，表示設(shè)置固定的寬度

<meta name="viewport" content="width=640, ?user-scalable=no">