webApp——媒體查詢

1.屏幕方向

豎屏
@media screen and (orientation:portrait)
橫屏
@media screen and (orientation:landscape)

2.像素，分辨率

@media screen and (-webkit-min-device-pixel-ratio:2)

（1） CSS pixels與device pixels
CSS pixels： 瀏覽器使用的抽象單位， 主要用來在網頁上繪製內容。
device pixels： 顯示屏幕的的最小物理單位，每個dp包含自己的顏色、亮度。

等值的 CSS pixels在手機屏幕上佔多大的位置，這不是固定的，這取決於很多屬性。經過分析和總結，我們可以得出這麼一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至於 devicePixelRatio是什麼東西，後面會講解） 。

（2） PPI/DPI
PPI，有時也叫DPI，所表示的是每英寸所擁有的像素（pixel）數目，數值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這裏的像素， 指的是device pixels。）搞清楚了PPI是什麼意思，我們就能很容易理解PPI的計算方式了，我們需要首先算出手機屏幕的對角線等效像素，然後處以對角線（我們平 常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度），就可以得到PPI了。準確的計算公示大家可以參照下圖。比較有意思的是，根據公式計算出來的 iPhone 4的PPI爲330，要比蘋果官方公佈的326要高一點點。

（3） 密度決定比例

由上圖可知，PPI在120-160之間的手機被歸爲低密度手機，160-240被歸爲中密度，240-320被歸爲高密度，320以上被歸爲超高密度（Apple給了它一個上流的名字——retina）。

這些密度對應着一個特定的縮放比例值，拿我們最熟悉的iphone4或4s來說，它們的PPI是326，屬於超高密度的手機。當我們書寫一個寬度爲 320px的頁面放到iphone中顯示，你會發現，它竟然是滿寬的。這是因爲，頁面被默認放大了兩倍，也就是640px，而iphone4或4s的寬， 正是640px。

圖中把高密度的一類圈起來，是因爲這是android手機的統計數據，在國內安卓手機市場中，高密度的設備佔了絕大多數的市場份額，這是很重要的一點，也是我們做安卓端webapp要注意的關鍵點。

3.js操作兼容判斷

1.window.devicePixelRatio//獲得設備像素縮放比
2.js操作媒體查詢

var mq=window.matchMedia('screen and (min-width: 800px)');

//當媒體查詢的狀態改變時,例如頁面由799變成了801px
mq.addListener(widthWatch);

function widthWatch(){
    if(mq.matches){
        //........滿足條件
    }else{
        //........
    }
}
widthWatch();