Media Queries行動裝置樣式

Media Queries行動裝置樣式

本節我們將為你帶來一種全新的樣式技術。通過Media Queries樣式模組，可以實現根據行動裝置的螢幕大小，定製網站頁面的不同布局效果。它的優點是開發人員只需要實現一套頁面，就能夠在所有平台的瀏覽器下訪問網站的不同效果。

傳統網站在iPhone上的顯示問題

在開始介紹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樣式模組。

接下來我們將會介紹如何使用這兩個技術知識點。

viewport設定適應行動裝置螢幕大小1．什麼是viewport

Apple為瞭解決移動版Safari的螢幕解析度大小問題，專門定義了viewport虛擬視窗。它的主要作用是允許開發人員建立一個虛擬視窗（viewport），並自訂其視窗的大小或縮放功能。

如果開發人員沒有定義這個虛擬視窗，移動版Safari的虛擬視窗預設大小為980像素。現在，除了Safari瀏覽器外，其他瀏覽器也支援viewport虛擬視窗。但是，不同的瀏覽器對viewport視窗的預設大小支援都不一致。預設值分別如下：

Android Browser瀏覽器的預設值是800像素；

IE瀏覽器的預設值是974像素；

Opera瀏覽器的預設值是850像素。

2．如何使用viewport

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://blog.csdn.net/broadview2006/article/details/7609750