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在创建响应式页面时用途更加广泛。下面的表格是一个例子，

( 也可以参考：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 的区别