移动网络的最大设备宽度和最大宽度之间有什么区别？

我需要为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-height和max-device-height自然。

max-width指的是视口的宽度，可与一起用于定位特定尺寸或方向max-height。使用多个max-width（或min-width）条件，您可以在调整浏览器大小或在iPhone等设备上更改方向时更改页面样式。

max-device-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是设备渲染宽度

@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-device-width是所有屏幕的宽度，而max-width表示浏览器用来显示页面的空间。但是另一个重要的区别是对android浏览器的支持，实际上，如果您要使用max-device-width，那么它将仅在Opera中起作用，相反，我确信max-width将适用于每种移动浏览器（我已经在Chrome，firefox和Opera中针对ANDROID进行了测试）。

max-width是目标显示区域（例如浏览器）的宽度；最大设备宽度是设备整个渲染区域（即实际设备屏幕）的宽度。

•如果使用max-device-width，则在更改桌面上浏览器窗口的大小时，CSS样式将不会更改为其他媒体查询设置；

•如果使用max-width，则当您在桌面上更改浏览器的大小时，CSS将更改为其他媒体查询设置，并且可能会以移动样式显示给您，例如触摸式菜单。

如果您要制作跨平台应用程序（例如，使用phonegap / cordova），

不要使用设备宽度或设备高度。而是在CSS媒体查询中使用width或height，因为Android设备会在device-width或device-height中产生问题。对于iOS，它工作正常。仅Android设备不支持device-width / device-height。

不再使用设备宽度/高度。

设备宽度，设备高度和设备纵横比在媒体查询级别4中已弃用：https : //developer.mozilla.org/zh-CN/docs/Web/CSS/@media#Media_features

只需将宽度/高度（无最小值/最大值）与方向和（最小值/最大值-）分辨率结合使用即可定位特定设备。在移动设备上，宽度/高度应与设备宽度/高度相同。