關於viewport

最近無聊的很，買了本教材，學習響應式網站設計。

由於有多年css的編程基礎，前面的媒介查詢學的很順利。當學到viewport這個mata標籤的時候，教程講的比較簡單。

今天，百度了很多資料，基本搞清楚了這個概念。

一、viewport是針對移動終端而言的，最早由蘋果公司提出，這不奇怪，移動終端，那蘋果是老大。

二、viewport書寫規則通常是這樣的<meta name="viewport"  content="width=device-width,initial-scale=1.0,user-scalable=no" />

三、viewport的大致意思就是手機瀏覽網頁時的可見區域。

四、因爲網頁一般是針對計算機屏幕設計的，寬度一般都在960px以上，手機怎麼能放下呢？哪位說了，手機分辨率如今不也老大了麼？也有900多。那好吧！

可問題是電腦和手機像素點不同大，對應着放過來，結構和網頁的總體面貌當然沒變，可是字體呢？圖像呢？不知道縮小了多少倍，誰能看得見？哪位又說了，不是能夠用兩個指頭把手機屏幕放大嗎？好吧，你又贏了。可你想過沒有，此刻，又出現了新問題，討厭的滾動條出現了，須要左右滑動屏幕才能找見內容。這可不是我想要的結果。

五、此刻，viewport出現了。

先耐住性子，聽我講另外一個概念，否則一下子又糊塗了。什麼概念？就是css裏常常用到的像素，即px。既然上面說了，電腦屏幕和手機屏幕像素點並不同大，那麼，當用手機終端打開網頁的時候，px以那個爲準哪？用手機打開，固然是以手機的更小的像素點爲準了。這就是爲何字體變得特別小的緣由。

又回到剛纔的問題了。陷入死循環無解了嗎？

人類的智慧是誰都沒法阻擋的。

其實……，說了半天廢話，真正想說的是，手機瀏覽器理解的px的大小也是電腦屏幕那麼大。哪位有誰了，怎麼可能呢？我也不知道，可事實好像就是這樣，這裏的機制我也沒搞懂，但其中有一二叫作TdevicePiexRitio的參數很重要。這個參數的意思就是兩者的比例。

 

六、聽說，viewport還有幾個呢。一個叫作layout viewport，還有一個叫作visual viewport，還有一個叫作ideal viewport。layout viewport即網頁的原始大小，手機瀏覽器都有預置值。後來又出現了visual viewport，就是可見的瀏覽器窗口。  最重要的是這個ideal viewport，它實際上就是divice-width。

七、一旦設置了width爲device-width，這時候，initial-scale參數就起做用了，縮放的標準就是device-width，黨initial-scale=2的時候，viewport實際尺寸縮小了一半，即倘若device-width爲360px，那麼，此刻，viewport僅有180px的寬度。也就是說，電腦上製做移動web的時候，只須要設計180px，頁面就能夠充滿手機屏幕了。