本節書摘來自異步社群《html5觸摸界面設計與開發》一書中的第2章，第2.4節,作者： 【美】stephen woods 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
在iphone誕生之前，手機浏覽器嘗試通過調整内容來适應網頁，取得了不同程度的成功。iphone上的safari沒有做絲毫的嘗試，取而代之的是在各種各樣的虛拟視窗上展現網頁，這些虛拟視窗被稱為“視圖”。使用者可以通過放大來檢視網頁的部分内容或通過縮小來檢視網頁的全部内容。
為了給開發者提供一定程度的展現頁面的控制權，蘋果公司提供了viewport的元資訊（meta）元素，它可以指定虛拟視窗大小。它改變了網站建設的很多方面。了解viewport是成功建設移動網站的第一步。
虛拟像素
作為網站開發者，我們喜歡像素。在網頁上進行布局，最精确和最簡單的方式就是使用像素。像素是螢幕上最小的單元，一旦指定了像素值就能确切地知道它的大小。如果你拿出顯微鏡，可以在螢幕上一個一個地數出這些像素點。
在移動裝置的螢幕上看到的像素與桌面裝置上不同。這意味着，在iphone上，無法拿出顯微鏡來驗證一個元素是否是300px寬。在一個沒有viewport 元資訊的頁面上，視圖會預設設定寬度為980px，則寬度為300px的元素表示的寬度為300虛拟像素寬（圖2.3）。
https://yqfile.alicdn.com/2c652d5c5f6c989b2114c23250e8511abdf26ca2.png" >
舉個例子，如果聲明
那麼一個在css中被定義寬度為600px的元素在頁面加載初始化時将會橫向充滿螢幕（圖2.4）直到使用者通過輕按兩下放大時才變得更大。
px與em
雖然在css2和css3的規範中定義了許多機關，但是大多數開發人員限制自己隻使用兩個：em和px。1個機關的em總是代表目前的字型大小。如果字型大小是12px，那麼1em就等于12px。1個機關的px（曆史上）是螢幕上的一個像素。2005年左右，使用em變得非常流行，因為當時流行的浏覽器有了改變字型大小的能力。因為機關em的定義是基于字型大小的，是以可以很容易地進行布局，以适應使用者標明的字型大小。
自ie7開始，浏覽器的預設縮放為全頁面縮放，而不是隻改變字型大小。 由于簡單，px現在已是設計師們最流行的選擇。px更容易溝通，更容易了解。像em和其他未被充分利用的機關也有相應的用途，它們主要用于排版，而不是布局，px才是用來對網頁進行布局的最簡單的機關。
viewport就是一個虛拟的視窗，viewport的邊緣代替浏覽器的邊緣，成為了視窗的邊緣。 viewport的寬度和高度除了可以用像素值，還可以接受兩個關鍵字：裝置寬度和裝置高度，這顯然是根據裝置螢幕的像素（圖2.5）傳回實際的尺寸。
https://yqfile.alicdn.com/6648c02db46637e64e6a16ed9189589c08954acb.png" >
https://yqfile.alicdn.com/f6c7f38b574c044a4d5baf509f7363a974895809.png" >
加州鳥類網站的viewport寬度會被設定為與裝置的寬度相同，從設計的角度，這樣看起來友善。此外，當我們要確定css适應不同的裝置時，也會有很大幫助。從iphone 1到4s（假設在垂直方向），device-width的值都是320px。
高密度顯示屏
從iphone和viewport 标簽出現之後，每一代移動裝置的分辨率都在增加。現在像素太高，實際像素小到即使用顯微鏡都難以分辨。如果規範沒有改變，當網頁的viewport寬度設定為裝置寬度時，出現非常微小的使用者界面。在iphone 4中，即第一個有着高密度顯示屏的裝置上，這些元素相對它們在老版本的iphone上隻有一半大小。
此外，蘋果公司是第一個将高密度顯示屏裝置推向市場的制造商。為了讓web開發者的思維保持清晰，蘋果公司決定繼續在iphone 4上傳回320的裝置寬度，盡管螢幕實體像素為640。 安卓裝置也如法炮制。這些裝置更複雜，因為在如何顯示上，它們給了使用者更多的控制權。（安卓上的chrome有一個不是很有用的target-density dpi的viewport屬性來支援它，你可以檢視安卓開發者文檔來擷取更多的相關資訊）。所有的裝置都将傳回一個裝置開發者認為是布局界面元素的理想尺寸的值作為device-width。值有很大不同，是以當我們為一個viewport寬度為裝置寬度的web頁面的布局時，我們需要確定布局方式可以處理一些伸縮問題，就像一個傳統桌面網站的流式布局一樣。
這對加州鳥類網站意味着什麼呢？因為設計師為我們提供了優美且充滿整個視窗的移動布局，我們可以這樣設定device-width：
在大多數情況下，這樣設定是最好的，因為它允許界面完全适應使用者的裝置，我們就不必擔心網頁的寬度會超過裝置的寬度。