我需要为iphone/android手机开发一些html页面，但max-device-width和max-width之间的区别是什么?我需要使用不同的css不同的屏幕大小。
@media all and (max-device-width: 400px)
@media all and (max-width: 400px)
有什么不同?
当前回答
你觉得用这种风格怎么样?
对于所有主要用于“移动设备”的断点，我使用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-width是目标显示区域的宽度，例如浏览器
Max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕
max-height和max-device-height也一样。
你觉得用这种风格怎么样?
对于所有主要用于“移动设备”的断点，我使用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-width指的是视口的宽度，与max-height结合使用，可以用于目标特定的大小或方向。使用多个max-width(或min-width)条件，您可以在浏览器调整大小或在iPhone等设备上改变方向时更改页面样式。
Max-device-width指的是设备的视口大小，不考虑方向、当前缩放或调整大小。这在设备上不会改变，因此不能在屏幕旋转或调整大小时用于切换样式表或CSS指令。
不要再使用device-width/height了。
在媒体查询级别4中，device-width, device-height和device-aspect-ratio已弃用: https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features
只需要使用宽度/高度(没有最小/最大)结合方向和(最小/最大-)分辨率来定位特定的设备。在移动设备上，宽度/高度应该与device-width/height相同。
Max-device-width是设备渲染宽度
@media all and (max-device-width: 400px) {
/* styles for devices with a maximum width of 400px and less
Changes only on device orientation */
}
@media all and (max-width: 400px) {
/* styles for target area with a maximum width of 400px and less
Changes on device orientation , browser resize */
}
max-width是目标显示区域的宽度，表示浏览器的当前大小。
