移動前端第一彈：viewport詳解 · Web前端干貨鋪

# 移動前端第一彈：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/ ## 前言這次想聊聊移動開發相關的事。是的，你沒有看錯，一句話就可以開始你的移動前端開發。你心里一定在想，什么話這么酷，能夠瞬間帶入到移動前端開發的世界。但其實它一點也不新奇，不復雜。 ## 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](http://www.quirksmode.org/)已經做了非常棒的闡釋，你也可以在`StackOverflow`上找到一些對此描述的相互補充，例如：[[1]](http://stackoverflow.com/questions/6333927/difference-between-visual-viewport-and-layout-viewport), [[2]](http://stackoverflow.com/questions/7344886/visual-viewport-vs-layout-viewport-on-mobile-devices)，有興趣的童鞋也可以看看 ## 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`；舉個例子： ```html <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`用于指定頁面的初始縮放比例，假定你這樣定義： ```html <meta name="viewport" content="initial-scale=2" /> ``` 那么用戶將會看到2倍大小的頁面內容。在說`width`的時候，我們說到`initial-scale`也能實現`ideal viewport`，是的，你只需要這樣做，也可以得到完美視口： ```html <meta name="viewport" content="initial-scale=1" /> ``` ### maximum-scale 在移動端，你可能會考慮用戶瀏覽不便，然后給予用戶放大頁面的權利，但同時又希望是在一定范圍內的放大，這時就可以使用`maximum-scale`來進行約束。 `maximum-scale`用于指定用戶能夠放大的比例。舉個例子來講： ```html <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`。使用方法如下： ```html <meta name="viewport" content="user-scalable=no" /> ``` ## 結語正如開篇所說，這既不高深也不新奇，它而僅僅是一點觀念轉變。當你掌握了`viewport`，那么意味著你已經大致了解了移動平臺與PC平臺的不同，你可以更專注而細致的去解決某些平臺差異問題。