CSS3: 移動端開發中 max-device-width 與 max-width 的差別

翻譯自stackoverflow.com，源位址：http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web

有同學需要開發web頁在iphone/android手機上通路，想問max-device-width 與 max-width 有什麼差別，他打算針對不同的螢幕大小加載不同的樣式，就像下面這樣：

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)
           

這兩者有什麼不同？

max-width 指的是顯示區域的寬度，比如浏覽器的顯示區域寬度

（max-width is the width of the target display area, e.g. the browser）

max-device-width 指的是裝置整個渲染（顯示）區域的寬度，比如裝置的實際螢幕大小，也就是裝置分辨率 

（max-device-width is the width of the device’s entire rendering area, i.e. the actual device screen）

max-height

與

max-device-height  

也是同理

更進一步說，max-width在視窗大小改變或橫豎屏轉換時會發生變化

max-device-width隻與裝置相關，橫豎屏轉換或改變尺寸，縮放都不會發生變化（部分android的寬高會互換而IOS不會） 

如何你需要調整浏覽器大小檢視頁面的變化，那開發過程中就使用 max-width，盡管在實際的生産環境中用max-device-width更精确

要是隻關心兩者的差別，到這已經足夠了，下面是關于兩者在實際應用的差別，來自另一篇文章：

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

在CSS的媒體查詢中，width與device-width之間的差別總是讓人感到迷惑，下面就讓我們來闡述一下兩者的差別。

device- width指的是裝置本身的寬度，也就是螢幕的分辨率，比如說你手機的分辨率是1440*900，這表示你的螢幕寬是1440px， 是以device-width是1440px。大部分的手機寬度不到480px，（當然今後的趨勢是越來越大)。iphone 4的device-width就隻有320px，即便對外宣稱有640*960.這要歸功于iphone的retina顯示方式，也就是用兩個像素來表示螢幕上一個CSS像素，IPAD3也是這樣的。官方說IPAD3跟前幾代一樣采用的device-width是768px，它的實際分辨率達到了1536*2048，就是這個原因。

盡管device-width在指定特定的裝置更有用，相比之下width在建立響應式頁面時用途更加廣泛。下面的表格是一個例子，

CSS Media Dimensions

Device	resolution (px)	device-width/ device-height (px)
iPhone	320 x 480	320 x 480, in both portrait and landscape mode
iPhone 4	640 x 960	320 x 480, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 5, 5s	640 x 1136	320 x 568, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 6	750 x 1334	375 x 667, in both portrait and landscape mode. device-pixel-ratio is 2
iPhone 6 plus	1242 x 2208	414 x 736, in both portrait and landscape mode. device-pixel-ratio is 3
iPad 1 and 2	768 x 1024	768 x 1024, in both portrait and landscape mode
iPad 3	1536 x 2048	768 x 1024, in both portrait and landscape modeCSS pixel density is 2
Samsung Galaxy S I and II	480 x 800	320 x 533, in portrait modeCSS pixel density is 1.5
Samsung Galaxy S III	720 x 1280	360? x 640?, in portrait mode
HTC Evo 3D	540 x 960	360 x 640, portrait modeCSS pixel density is 1.5
Amazon Kindle Fire	1024 x 600	1024 x 600, landscape mode

( 也可以參考：CSS3 媒體查詢移動裝置尺寸 Media Queries for Standard Devices)

需要注意的是，在蘋果裝置上，device-width指的總是裝置處于肖像模式時的寬，不會随裝置橫豎屏轉換變化，就是說不管怎麼換，寬都是不會變的，高也一樣。

下面是一個通過媒體查詢差別裝置和不同尺寸的例子：

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* some CSS here */
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
/* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
/* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### iPhone 5 Portrait or Landscape #### */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2){
/* some CSS here */
}

/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3){
/* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
/* some CSS here */
}

/* #### Desktops #### */
@media screen and (min-width: 1024px){
/* some CSS here */
}
           

通過以上方式，我們的CSS媒體查詢方案已經很完善了，但為了頁面展示跟我們想像的一樣，還要增加一個viewport标簽： 

meta

tag.

了解更多請參考：CSS：媒體查詢 CSS3 Media Queries

本文轉自：CSS3: 移動端開發中 max-device-width 與 max-width 的差別