移動WEB開發中媒體查詢裡的width, device-width, resolution

/*1、width： viewport的寬度，css畫素，三星S3的viewort預設寬度是980px。
當設定viewport width=device-width時，對應的媒體查詢中width的值為：裝置物理畫素 / window.devicePixelRatio。
----------------------------------------------------------*/
@media screen and (width:360px){
body{ background-color:#0f0; }
}

/*2、device-with： 螢幕寬度，android上是裝置畫素,ios上是css畫素。
三星S3的螢幕是720*1280媒體查詢程式碼如下：
----------------------------------------------------------*/
@media screen and (device-width:720px){
body{ background-color:#ff0; }
}

/* iphone螢幕的裝置畫素是640*960，css畫素320*480。
媒體查詢程式碼如下：
-------------------------------------------------------*/
@media screen and (width:320px){
body{ background-color:#ff0; }
}


/*3、resolution： 裝置解析度，每英寸所擁有的畫素數。如：
----------------------------------------------------------*/
@media screen and (resolution:306dpi){
body{ background-color:#000; }

}

媒體查詢的device-width特性在ios和android上不一致，android是應用裝置畫素，ios是應用css畫素。
另外resolution瀏覽器支援不夠好，可以使用device-pixel-ratio代替,device-pixel-ratio的值為 window.devicePixelRatio