響應式設計

今天用jquery mobile 寫了一個例子 可是在手機不管如何都不能顯示。都是縮放的。

百度了下。知道少加了i一個meta屬性

<meta name="viewport" content="width=device-width" />

1.媒體查詢

下面列了一部分供你們參考（參考自http://www.w3.org/html/ig/zh/wiki/CSS3媒體查詢）：
- width 視口寬度
- height 視口高度
- device-width 設備屏幕的寬度
- device-height 設備屏幕的高度
- orientation 檢測屏幕處於橫屏仍是豎屏
- aspect-ratio 基於視口的寬高比例
- device-aspect-ratio 基於設備屏幕的寬高比
- color 顏色的位數，如min-color：32 匹配設備是否有32位或以上的顏色
- color-index 設備的顏色索引表中的顏色數
- monochrome 檢測單色振緩衝區中每像素使用的位數。爲非負數，如monochrome：3
- resolution 檢測屏幕或打印機的分辨率，如min-resolution：300dpi(dpi後面會介紹)，也能夠是每釐米像素點的度量值，如min-resolution：120dpcm
- scan 掃描方式，值爲progressive（逐行掃描）、interlace（隔行掃描）
- grid 檢測輸出設備是網格設備仍是位圖設備

建立媒體查詢時，上述特性（scan和grid不行）均可以加上min和max前綴建立媒體查詢的範圍。除了link標籤可以進行媒體查詢，是否是還有其它的呢，答案是Yes 。html中的meta標籤，此前咱們經常使用的應該是這個
<meta name="viewport" content="width=device-width" />

在多數ios和android設備的瀏覽器都支持viewport meta元素覆蓋默認的畫布縮放設置。在標籤中插入meta標籤，設置相應屬性便可，如上代碼，name=」viewport」 content中width=device-width表示瀏覽器頁面寬度等於設備寬度（同理能夠設置高度，也可指定具體值），initial-scale=1表示頁面不縮放保持，mininum-scale=1和maximum-scale=1表示容許用戶最小縮小至原大小和擴大到原大小（實際就是不讓縮放^^），user-scaleable=no 表示禁止縮放, target- densitydpi = high-dpi表示適配高分辨率的屏幕，還能夠取值爲dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi，後面的四個定性，第一個定量，即dpi_value是DPI值，device-dpi是使用設備本來的 dpi 做爲目標 dp，不發生默認縮放，然後面的三個是指dpi取值在必定範圍的表示。這裏咱們先介紹前文出現過的一個名詞dpi，所表示的是每英寸所擁有的像素（pixel）數目，數值越高，即表明顯示屏可以以越高的密度顯示圖像。當達到人眼的極限分辨率時，喬幫主給它取了一個很高端的名字——Retina。那麼目前市面的手機分辨率是怎樣的一個分佈呢，ios你們都知道的，從iphone4時代開始就已是Retina屏了，至於Android能夠看下此前Google官方公佈的數據：

文章轉自:http://sc.chinaz.com/info/130410113358.htm#