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://bvbroadview.blog.51cto.com/addblog.php