本節我們将為你帶來一種全新的樣式技術。通過Media Queries樣式子產品，可以實作根據移動裝置的螢幕大小，定制網站頁面的不同布局效果。它的優點是開發者隻需要實作一套頁面，就能夠在所有平台的浏覽器下通路網站的不同效果。
在開始介紹Media Queries知識之前，先來看看一個傳統的網站在各種移動裝置上的頁面顯示效果。
首先，圖6-1所示的是Google首頁傳統網站在iPhone Safari浏覽器下的效果圖。
從圖6-1中可以看到，網頁上有很多部分的内容都因為浏覽器的實際大小而縮小了字号。為什麼會出現這樣的效果呢？
實際上，在iPhone中使用Safari浏覽器浏覽傳統Web網站的時候，Safari浏覽器為了能夠将整個頁面的内容在頁面中顯示出來，會在螢幕上建立一個980px寬度的虛拟布局視窗，并按照980px寬度的視窗大小顯示網頁。這樣，我們所看到的效果就像圖6-1，同時網頁可以允許以縮放的形式放大或縮小網頁。
在過去，為了能夠适應不同顯示器分辨率大小，通常在設計網站或開發一套網站的時候，都會以最低分辨率800´600的标準作為頁面大小的基礎，而且還不會考慮适應移動裝置的螢幕大小的頁面。
但是，iPhone的分辨率是320´480，對于以最低分辨率大小顯示的網站，在iPhone的Safari浏覽器下通路的效果依然還是那麼糟糕。那麼，究竟這些傳統的Web網站有沒辦法在iPhone等小螢幕的移動裝置下顯示正常呢？答案是可以的。
現在來看看Google是如何把傳統網站首頁變成移動版本的網站首頁的，如圖6-2所示。
Google首頁轉成移動版後，整個頁面上的内容已經清晰可見，頁面的樣式風格和傳統網站有一些差異。Google究竟是如何将傳統的網站轉變為移動版本的網站的呢？同時，其他複雜的網站風格又需要做些什麼才能變成移動版本呢？
若要實作上述的功能，我們需要在HTML頁面用到viewport及Media Queries樣式子產品。
接下來我們将會介紹如何使用這兩個技術知識點。
Apple為了解決移動版Safari的螢幕分辨率大小問題，專門定義了viewport虛拟視窗。它的主要作用是允許開發者建立一個虛拟的視窗（viewport），并自定義其視窗的大小或縮放功能。
如果開發者沒有定義這個虛拟視窗，移動版Safari的虛拟視窗預設大小為980像素。現在，除了Safari浏覽器外，其他浏覽器也支援viewport虛拟視窗。但是，不同的浏覽器對viewport視窗的預設大小支援都不一緻。預設值分别如下：
— Android Browser浏覽器的預設值是800像素；
— IE浏覽器的預設值是974像素；
— Opera浏覽器的預設值是850像素。
viewport虛拟視窗是在meta元素中定義的，其主要作用是設定Web頁面适應移動裝置的螢幕大小。
如以下代碼：
<meta name="viewport" content="width=device-width,
initial-scale=1,user-scalable=0" />
該代碼的主要作用是自定義虛拟視窗，并指定虛拟視窗width寬度為device-width，初始縮放比例大小為1倍，同時不允許使用者使用手動縮放功能。
在上面的代碼中，我們使用了一個特别的名字：device-width。自iPhone面世以來，其螢幕的分辨率一緻維持在320´480。由于Apple在加入viewport時，基本上使用width= device-width的表達方式來表示iPhone螢幕的實際分辨率大小的寬度，比如width=320。是以，其他浏覽器廠商在實作其viewport的時候，也相容了device-width這樣的特性。
代碼中的content屬性内共定義三種參數。實際上content屬性允許設定6種不同的參數，分别如下：
— width指定虛拟視窗的螢幕寬度大小。
— height指定虛拟視窗的螢幕高度大小。
— initial-scale指定初始縮放比例。
— maximum-scale指定允許使用者縮放的最大比例。
— minimum-scale指定允許使用者縮放的最小比例。
— user-scalable指定是否允許手動縮放。
本文節選自《HTML5移動Web開發指南》一書 唐俊開著
本書詳細資訊:http://bvbroadview.blog.51cto.com/addblog.php