最近項目中需要開發内嵌的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程式，在這種情況下，可以關閉使用者的縮放屬性