譯——meta viewport

---

 

此文翻譯PPK大神的——meta viewport。

主要講到了第三種viewport——ideal viewport,以及使用meta viewport 設置移動瀏覽器的視口。

 the meta viewport tag

<meta name="viewport" ....>包含了瀏覽器對於viewport和縮放的各類指令。尤爲是，它容許web開發者設置layout viewport的寬度，從而直接影響CSS的聲明的計算結果，好比width:20%。

具體語法以下：

<meta name="viewport" content="name=value,name=value">

指令

每一個鍵值對都是指令。（這個詞是我本身發明的）總共有六個：

• width：設置layout viewport的寬度
• initial-scale：設置頁面與layout viewport之間的初始放大係數
• minimum-scale：設置最小放大係數（用戶能夠雖小的最小程度）
• maxmum-sacle：最大放大係數（用戶能夠放大的最大程度，好比300%）
• height：設置layout viewport的高度。應該設置佈局視圖的高度。它在任何地方都不受支持。（通常不會規定高度）
• user-scalable：設置爲no，意味着阻止用戶進行縮放操做。最好不要使用。

device-width value

width指令有一個特殊的值：device-width。設置layout viewport爲ideal viewport。

理論上有一個device-height……（不用）

三種viewport

好久之前，我曾報道過移動瀏覽器有兩個視圖:可視視圖和佈局視圖（visual viewport and layout viewport）。這裏我假設讀者已經瞭解他們，因此若是有須要，能夠去讀一下原文。（個人譯文）

the ideal viewport（理想視口）

原來還有第三種視口，我決定稱呼它爲ideal viewport。它給出了設備上web頁面的理想大小。所以，該值因設備不一樣。

在老舊或廉價的低分辨的設備上，ideal viewport與物理像素相同，可是這並非必須的。具備更高物理像素密度的新設備極可能保留舊的ideal viewport，由於它很是適合該設備。

包括4S在內，iPhone的理想視口是320x480，不管它是否有視網膜屏幕（高分辨？）。這是由於320x480是這些iphone手機網頁的理想尺寸。

關於ideal viewport重要的兩點是：

1. layout viewport 能夠設置爲visual viewport的大小。width=device-width和initial-scale=1就能夠達到這樣的效果
2. 全部的縮放指令（scale directives）都是相對於ideal viewport的，而不是layout viewport的寬度。maximum-scale=3表示能夠放大至ideal viewport三倍。

找到理想的視口尺寸（ideal viewport dimensions）

若是可以讀出ideal viewport的尺寸，是很是有用的。事實並不是如此。

well,you can do it。能夠給頁面設置元標籤讀出document.documentElement.clientWidth/Height：

<meta name="viewport" content="width=device-width,initial-scale=1">

若是不被支持那麼就沒有其餘辦法可以讀出ideal viewport的尺寸。我本但願screen.width/height能夠有所幫助，可是目前只有Blackburry能夠給出正確的信息，其餘瀏覽器給出各類無用信息。

開放式問題：screen.width/height應該給出ideal viewport 的尺寸嗎？

Pro：該屬性對仍是包含有用信息的

Con：ideal viewport的尺寸沒有必要與設備的物理像素相同。

兼容性——ideal viewport

layout viewport的寬度

在渲染頁面以前，瀏覽器須要知道layout viewport的寬高數值。這個數值會影響到CSS好比width:20%這樣的聲明的計算結果。

沒有任何進一步的指示，瀏覽器本身選擇寬度。在測試的8款瀏覽器中，有6款是980px，黑莓和IE10是1024px。這裏沒有對錯之分;這只是瀏覽器廠商的選擇。

當你在meta viewport中設置width=400或則其餘數值，至關於設置了layout viewport的值。這咱們已經知道。

然而，Android Webkit和IE瀏覽器的最小viewport是320px。當你低於320px時，他們會恢復到ideal viewport的寬度。

而後是layout viewport與ideal viewport相等的例子。這發生在當你設置width=device-width,initial-dcale=1的時候。這有點複雜，由於Sarari和IE10有bugs，使用initial-scale也有問題，可是這是廣泛規律。

Minimum and maximum dimensions

layout viewport的最大寬度是10000像素。我並不徹底相信這個數值，由於瀏覽器不會容許你放大頁面到這個程度。可是，我依然接受這個數值。

layout viewport的最小寬度是ideal viewport的十分之一，也就是最大的縮放係數（IE的layout viewport不會變得比visual viewport更小）。例外：Android Webkit和IE瀏覽器從不會低於320px。

兼容性——layout viewport

Zoom（縮放）

縮放有點棘手。理論聽起來很簡單：能夠決定用戶放大或者縮小的縮放係數。有兩方面的問題：

1. 咱們沒法直接讀取縮放係數。可是咱們讀取visual viewport的寬度，它與縮放係數蹭成反比例。縮放係數越大，visual viewport就越小。因此最小的縮放係數決定了visual viewport的最大值，反過來也同樣。
2. 事實證實，全部縮放因子都與ideal viewport相關，不管layout viewport的當前大小如何。

還有就是名字的問題。在Apple-speak（蘋果語言？），縮放稱爲scale，對應的meta viewport指令爲initial-scale，minimum-scale，maximum-scale。其餘瀏覽器爲了兼容IPhone的網站，也被迫遵循。

這三個指令都須要縮放係數，好比「縮放至ideal viewport的200%」。

Formulas（公式）

先來定義一個公式：

visual viewport width = ideal viewport width / zoom factor
zoom factor = ideal viewport width / visual viewport width

因此，若是ideal viewport 是320px，縮放係數是2，那麼visual viewport就是160px。layout viewport在計算中不起做用。

最大和最小縮放因子

瀏覽器支持的最大和最小縮放係數是多少呢？

首先，有一個限制，visual viewport不能比layout viewport更寬，因此在大多實際狀況中最小的縮放係數是 ideal viewport / layout viewport 。

不過，在這些測試中，我可使用荒謬的layout viewport寬度，好比5000。我這樣作了，結果是:

• Android Webkit瀏覽器最小的縮放係數是0.25，最大是4。這不能改變。然而，它使用640 / 0.25 = 2560px，這適應橫屏模式，也適應豎屏模式。
• IE最大的visual viewport是1024px，豎屏最大的縮放係數是6，橫屏是6又2/3。這也不能改變。
• 在其餘瀏覽器中，若是沒有任何縮放指令，最小縮放係數約爲0.25，最大爲5。
• 若是經過添加一個較大layout viewport寬度或者一個較大的最大縮放係數，最小縮放係數會變成0.1，最大爲10。

這些因素略有不一樣;見下表。

理論上，IPhone的visual viewport範圍是32px （最大縮放係數爲10）到3200px（最小縮放係數爲0.1）。

initial-scale

設置initial-scale指令能夠作兩件事：

1. 設置初始頁面縮放係數，相對於ideal viewport進行計算。所以生成了visual viewport。
2. 將layout viewport設置爲上一步計算的visual viewport。

假設咱們有一個處於豎屏模式的iPhone手機，並設置了initial-scale=2，並無下一步指示。因而visual viewport被設置成了160px。

然而，它也設置了layout viewport的寬度爲160px。因而咱們就有了一個最小縮放的寬度160px的web頁面。（visual  viewport不能比layout viewport更大，因此縮小操做沒有用）

NO，這徹底沒有意義。我會說這是瘋了之類的話。可是，瀏覽器就是這樣工做的。

瀏覽器bugs

除了Android Webkit's。顯然，Android webkit's容許改變layout viewport ，當initial-scale等於1而且沒有width指令的時候。因此initial-scale=1（沒有其餘指令）起做用了。

對於IE，它採用了錯誤的ideal viewport（320X320 代替 320X480），還僞裝值爲1（initial-scale）。因此你設置其餘值對於IE不起做用。

衝突的width指令

因爲initial-scale設置了layoutViewport，如今你能夠設置衝突指令：

<meta name="viewport" content="initial-scale=1,width=400">

那麼會發生什麼呢？瀏覽器獲得了衝突的指令。讓咱們在回顧一下Iphone4s：

1. initial-scale=1，會設置layout viewport豎屏模式下爲320px，橫屏模式下是480px。
2. width=400設置layout viewport寬度爲400px，不管是橫屏仍是豎屏。

瀏覽器會使用較大的寬度，不管橫屏或者豎屏，來解決這個問題。咱們例子，結果會是豎屏模式下layout viewport寬度爲400（320和400中較大的一個），橫屏模式下layout viewport是480（480 和400中較大的那個）。

有道理嗎？其實並無，可是瀏覽器依然這麼工做。

不管哪一種狀況，咱們都有一個layout viewport的最小寬度。上面的meta viewport設置layout viewport爲400px，可是瀏覽器容許在設備尺寸或者方向須要的狀況下，增加layout viewport。

我不肯定設置最小寬度是否有實際效果，可是若是你須要，它就在這裏。

瀏覽器bugs

Android webkits不遵循如下規則：若是width等於device-width或者小於320px，它始終會讓layout viewport等於ideal viewport的大小。大於320，始終採用width指令的值。

IE在大於width=480時，不遵循規則，它會設置layout viewport寬度爲1024px。

兼容——initial scale 和width

能夠去看原文圖示，有些交互沒辦法轉過來

minor iPhone bugs

我發現一個iPhone的小bug，iPad沒有。

1. 若是同時聲明width和initial-scale，瀏覽器會在橫屏方面是自動放大頁面（ie的visual viewport會layout viewport小得多）。
2. 用戶在橫屏模式下縮小而後切換到豎屏模式。
3. 橫屏下的minimum-scale與豎屏的minimum-scale乘以(portrait-ratio/landscape-ratio)。（因此若是橫屏模式viewport寬度爲400px，豎屏minimum-scale爲268）
4. 解決：在豎屏儘量放大，錯誤就會消失。

能夠在這裏試試。橫向拿着iPhone手機，跳轉到該頁面，按照上面的步驟作。

minimum- and maximum-scale

關於minimum-scale和maximum-scale，我作了比較少的測試。基本上工做正常，除了在Abdroid webkit上，它不支持minimum-scale；還有IE，運行的一團糟——很是糟糕，我已經放棄去理解到底發生了什麼。

下面的例子中，layout viewport應該按照上面描述的進行的計算，而後縮放係數從50%到200%，也就是說，visual viewport能夠ideal viewport的兩倍大到兩倍小。

一個例外：visual viewport不會變的比layout viewport更小。

 

參考

1. meta viewport
2. 有關各類手機的屏幕尺寸——http://screensiz.es/phone
3. W3C——css device adaptation module
4. viewport——overview