最近項目中需要開發內嵌的H5頁面，viewport不是很熟悉，故來翻譯一下此篇文件加深理解
原文
配置viewport
IOS上的safari使用一種縮放的工作模式來展示pc端的網頁，如果默認的設置對你的網頁展示不友好，推薦你改變veiwport默認配置，開發IOS上使用的網頁，你需要設置viewport，在html文檔中，增加一行標記來配置viewport，但是要理解viewport怎么對你的網頁展示還是很容易混淆，在配置viewport之前，你需要深度理解一下ios上的viewport
viewport是什么
在PC和IOS上瀏覽器的viewport有一些不太一樣
在IOS上的safari，沒有窗口、滾動條、調整窗口的按鈕見圖3-1，用戶輕彈手指來操作，用戶通過雙擊、雙手捏開來放大，雙手捏緊來縮小，這些收拾在pc端是不支持的，由于用戶有不同的操作方式來操作pc端和移動端的頁面，所以viewport在pc端和移動端表現不一樣，由于不一樣的表現，所以相同的css和html也有不一樣的表現。
圖3-1
桌面的safari viewport
桌面瀏覽器的viewport是網頁的可視區域如圖3-2，如果頁面的寬度大于viewport，用戶可以通過縮放按鈕來縮放瀏覽器的viewport大小，用戶也可以控制滾動條看到更多的頁面內容，當viewport變化，safari 也許會重新布局，比如會擴充壓縮寬度是適配viewport，如果頁面寬度小于viewport，那么剩余位置會填充剩余的空白
3-2
IOS上的viewport
在IOS上，viewport取決于內容如何布局、文本在頁面上的換行情況，viewport可能大于或小于可視區域，當用戶在IOS上平移網頁時灰色條形顯示在屏幕的右側和底部，作為視覺反饋，向用戶顯示與視口相比可見區域的大小，用戶可以使用雙擊輕點、捏開、捏緊手勢來改變viewport的縮放比例，唯一的例外是，當用戶從縱向更改為橫向時，在某些情況下，iOS上的Safari可能會調整視口的寬度和高度，并因此更改網頁布局
默認viewport配置
初始化設置寬度和縮放比例是為了讓大部分網頁可以很好的展示，如果3-3，默認的寬度是980px，當然這個默認值，可能不能很好的適配你的網頁，特別是如果您要針對特定??設備定制網站，例如3-3右邊的圖，網頁展示的太窄了，這樣的話，你可以修改默認的viewport
3-3
viewport meta tag
使用viewport meta標簽來提高網頁的展示，你可以設置viewport來這是默認的寬度和初始化縮放值，例如，如果你的網頁比980更窄，你應該設置寬度為你網頁內容的寬度，如果你專門為iphone ipod開發的web程序，你應該設置為設備的寬度
由于iOS在具有不同屏幕分辨率的設備上運行，因此在引用設備尺寸時，應使用常量而不是數字值。使用device-width作為設備的寬度，并使用device-height作為縱向的高度
你不需要設置所有的viewport屬性，如果僅設置了一部分屬性，然后iOS上的Safari會推斷其他值，例如如果你設置了默認的初始縮放為1.0，瀏覽器會推測橫向寬度為deivce-width，如果是縱向是，deivce-height為頁面寬度，因此，如果你向設置width為980px初始化scale為1.0，那你需要設置這兩個屬性
設置寬度為device-width
設置默認縮放
改變viewport的寬度和高度
在IOS上，你有一個非常重要的任務就是去設置viewport的寬度去適配你的web程序內容寬度，這樣來確保你的網頁在ios上看起來是正常的
如果你的網站必須要在980px下才能很好的適配，如果IOS上的safari不能設置980的viewport，只能左上角灰色的小塊能夠展示出來，這個默認就不能展示頁面的所有內容，這樣的話，你就需要設置meta去適配supported
3-4
如果頁面的寬度小于默認的viewport寬度，那么頁面展示將如圖3-5左邊的圖片，現在設置viewport的寬度為頁面的寬度，此刻展示如圖3-5右邊，為了實現右邊效果，你需要在你的html文件中的
增加如下代碼3-5
iphone、ipod觸屏設備上，web程序開發中，非常重要的是改變viewport的width為設備的寬度，圖3-6展示了，設置viewport為divice-width是的效果
3-6
瀏覽器是怎么設置初始化的寬度 高度 和初始化縮放
如果你設置了一些屬性，這時瀏覽器會自動計算其他屬性的值，以適配網頁的展示，例如，如果只設置了初始化的縮放值，這時候width和height會自動計算，相似的 如果只設置了width，那么heigh和scale會自動計算，如果你設置的值沒有生效，那么需要設置更多的值。
由于瀏覽器可以自動推算寬度、高度、縮放比例，那么用戶旋轉手機方向時，viewport的視口發生變化，例如當用戶通過旋轉設備從縱向更改為橫向時，視區寬度可能會擴大，僅有這種用戶行為可能引起viewport的重新計算，改變在瀏覽器的布局。
在iOS上，Safari的目標是當網頁完全縮小時，保持與任一方向上可見區域的比率相等的比率，使其適合可見區域，這最好通過獨立設置視區屬性來說明，然后觀察其他viewport屬性對viewport影響，下面一系列的例子來展示，相同的web 內容和不同viewport的設置相同影響。
圖3-7展示采用默認寬度980px和沒有默認縮放行為的 viewport，來一個web頁面的展示
3-7
圖3-8 設置了initial scale為1.0展示相同的web頁面，瀏覽器去推算了width和height去適配了網頁可視區域展示，這個width被推算成了橫向時device-width，縱向時device-height
3-8
相似的，如果你近設置了viewport的寬度，這個height和initial scale也會推算出來，圖3-9，展示phone設置viewport width為320時，縱向展示跟圖3-8一致，橫向展示的時候width等于device-width，它改變了初始的比例，當用戶改變到橫向時，它有放大的效果
3-9
圖3-10，在設置viewport width一個小于可視區域的寬度200px，展示相同的頁面，網頁的viewport被設置了200px時，推斷高度和影響頁面第一次渲染的的initical scale
3-10
最后，圖3-11設置了width和initical scale值來展示相同頁面，瀏覽器保持可視區域兩個方向上相同比率的自動推算了高度，因此如果width設置為980，initical width 為1.0 那么瀏覽器會推算出 手機橫置時為1091，縱置時為425
3-11
minimum-scale和maximum-scale屬性也會被影響，當手機改變方式時，這兩個屬性的范圍[0, 10.0], 默認的minimum-scale 0.25 maximum-scale 5.0
web程序設置viewport
如果你準備開發ios下的web應用程序，推薦設置你網頁的寬度為ios上的可視化寬度，設置為device-width，因此initical scale 為1.0，讓用戶改變手機方向時，viewport不會重新計算
如果你不改變瀏覽器的viewport 屬性，你的網頁會展示在頁面的左上角如圖3-12，在開發web應用程序時，設置viewport的width 應該是你的首要任務，不需要用戶通過縮放來使用你的程序
3-12
如果設置來device-width，那么你的網頁展示如圖3-13所有，用戶可以向下滑動來看余下的網頁，如果比可視區域更高
3-13
你也許不想用戶去縮放web程序，在這種情況下，可以關閉用戶的縮放屬性
