meta viewport 有6個屬性(暫且把content中的那些東西稱為乙個個屬性和值)，如下：
name
value
width
設定 layout viewport 的寬度,為乙個正整數,或字串" width-device"
initial-scale
設定頁面的初始縮放值,為乙個數字,可以帶小數
minimum-scale
允許使用者的最小縮放值,為乙個數字,可以帶小數
maximum-scale
允許使用者的最大縮放值,為乙個數字,可以帶小數
height
設定 layout viewport 的高度,這個屬性對我們並不重要,很少使用
user-scalable
是否允許使用者進行縮放,值為"no"或"yes",no 代表不允許, yes 代表允許
1、關於縮放以及initial-scale的預設值
首先我們先來討論一下縮放的問題，前面已經提到過，縮放是相對於ideal viewport來縮放的，縮放值越大，當前viewport的寬度就會越小，反之亦然。例如在iphone中，ideal viewport的寬度是320px，如果我們設定 initial-scale=2 ，此時viewport的寬度會變為只有160px了，這也好理解，放大了一倍嘛，就是原來1px的東西變成2px了，但是1px變為2px並不是把原來的320px變為640px了，而是在實際寬度不變的情況下，1px變得跟原來的2px的長度一樣了，所以放大2倍後原來需要320px才能填滿的寬度現在只需要160px就做到了。因此，我們可以得出乙個公式：
visual viewport寬度 = ideal viewport寬度 / 當前縮放值
當前縮放值 = ideal viewport寬度 / visual viewport寬度
ps: visual viewport的寬度指的是瀏覽器可視區域的寬度。
大多數瀏覽器都符合這個理論，但是安卓上的原生瀏覽器以及ie有些問題。安卓自帶的webkit瀏覽器只有在 initial-scale = 1 以及沒有設定width屬性時才是表現正常的，也就相當於這理論在它身上基本沒用；而ie則根本不甩initial-scale這個屬性，無論你給他設定什麼，initial-scale表現出來的效果永遠是1。
好了，現在再來說下initial-scale的預設值問題，就是不寫這個屬性的時候，它的預設值會是多少呢？很顯然不會是1，因為當 initial-scale = 1 時，當前的layout viewport寬度會被設為 ideal viewport的寬度，但前面說了，各瀏覽器預設的 layout viewport寬度一般都是980啊，1024啊，800啊等等這些個值，沒有一開始就是 ideal viewport的寬度的，所以 initial-scale的預設值肯定不是1。安卓裝置上的initial-scale預設值好像沒有方法能夠得到，或者就是乾脆它就沒有預設值，一定要你顯示的寫出來這個東西才會起作用，我們不管它了，這裡我們重點說一下iphone和ipad上的initial-scale預設值。
根據測試，我們可以在iphone和ipad上得到乙個結論，就是無論你給layout viewpor設定的寬度是多少，而又沒有指定初始的縮放值的話，那麼iphone和ipad會自動計算initial-scale這個值，以保證當前layout viewport的寬度在縮放後就是瀏覽器可視區域的寬度，也就是說不會出現橫向滾動條。比如說，在iphone上，我們不設定任何的viewport meta標籤，此時layout viewport的寬度為980px，但我們可以看到瀏覽器並沒有出現橫向滾動條，瀏覽器預設的把頁面縮小了。根據上面的公式，當前縮放值 = ideal viewport寬度 / visual viewport寬度，我們可以得出：
當前縮放值 = 320 / 980
也就是當前的initial-scale預設值應該是 0.33這樣子。當你指定了initial-scale的值後，這個預設值就不起作用了。
總之記住這個結論就行了：在iphone和ipad上，無論你給viewport設的寬的是多少，如果沒有指定預設的縮放值，則iphone和ipad會自動計算這個縮放值，以達到當前頁面不會出現橫向滾動條(或者說viewport的寬度就是螢幕的寬度)的目的。
移動web開發 meta 之 viewport
常用的 viewport meta 如下 1 metaname viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no 1 width 控制viewpor...
移動web開發 meta 之 viewport
常用的 viewport meta 如下 1 metaname viewport content width device width,initial scale 1,minimum scale 1,maximum scale 1,user scalable no 1 width 控制viewpor...
前端 移動開發 畫素 viewport
css 畫素 css 畫素是 web 程式設計的概念，本質上是為我們 web 開發者建立的乙個抽象結構，是相對的而不是絕對的。物理畫素 物理畫素是物理概念，螢幕是由很多畫素點組成的，各畫素點通過發出不同顏色的光來呈現螢幕的色彩。它是物理的，隨著裝置生產出來就已經被確定下來了，比如 iphone4 的...