我需要为iphone/android手机开发一些html页面，但max-device-width和max-width之间的区别是什么?我需要使用不同的css不同的屏幕大小。
@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
有什么不同?
当前回答
Max-width是目标显示区域的宽度，例如浏览器;Max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕。
•如果您使用max-device-width，当您更改桌面浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置;
•如果您正在使用max-width，当您更改桌面浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会显示手机的样式，例如触摸友好菜单。
其他回答
Max-width是目标显示区域的宽度，例如浏览器
Max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕
max-height和max-device-height也一样。
Max-width是目标显示区域的宽度，例如浏览器;Max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕。
•如果您使用max-device-width，当您更改桌面浏览器窗口的大小时，CSS样式不会更改为不同的媒体查询设置;
•如果您正在使用max-width，当您更改桌面浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会显示手机的样式，例如触摸友好菜单。
你觉得用这种风格怎么样?
对于所有主要用于“移动设备”的断点，我使用min(max)-device-width，而对于主要用于“桌面”的断点，我使用min(max)-width。
有很多“移动设备”计算宽度很糟糕。
看看http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml:
/* #### 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 (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
/* 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 */
}
区别在于max-device-width是所有屏幕的宽度，max-width是浏览器用来显示页面的空间。但另一个重要的区别是android浏览器的支持，事实上，如果你要使用max-device-width，这将只在Opera中工作，相反，我确信max-width将适用于各种移动浏览器(我已经在Chrome, firefox和Opera的android测试)。
如果你正在制作一款跨平台应用。使用phonegap/cordova)然后，
不要使用device-width或device-height。在CSS媒体查询中应该使用width或height，因为Android设备在device-width或device-height上会出现问题。对于iOS来说，它运行得很好。只有android设备不支持device-width/device-height。
