Question

我需要为iphone / android手机开发一些html页面，但max-device-width和max-width之间有什么区别？我需要为不同的屏幕尺寸使用不同的CSS。

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

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

有什么区别？

Answer 1

max-width是目标显示区域的宽度，例如浏览器

max-device-width是设备整个渲染区域的宽度，即实际的设备屏幕

max-height和max-device-height自然也是如此。

Answer 2

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

max-device-width指的是设备的视口大小，无论方向，当前比例或调整大小。这不会在设备上更改，因此在旋转或调整屏幕大小时不能用于切换样式表或CSS指令。

Answer 3

您对使用此款式有何看法？

对于主要用于“移动设备”的所有断点，我使用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 */
}

Answer 4

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 */
}

最大宽度是目标显示区域的宽度，表示浏览器的当前大小。

Answer 5

不同之处在于max-device-width是屏幕的全部宽度，max-width表示浏览器用于显示页面的空间。但另一个重要的区别是Android浏览器的支持，事实上如果你要使用max-device-width这只能用于Opera，相反我确信max-width适用于各种移动浏览器（我在Chrome，firefox和Opera中测试了它的ANDROID）。

Answer 6

如果您正在制作跨平台应用（例如，使用phonegap / cordova），那么，

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

Answer 7

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

媒体查询级别4中不推荐使用

设备宽度，设备高度和设备宽高比： https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features

只需使用宽度/高度（无最小/最大）与方向和组合（min / max-）分辨率以定位特定设备。移动宽度/高度应与设备宽度/高度相同。

Answer 8

max-width 是目标显示区域的宽度，例如浏览器; max-device-width 是设备整个渲染区域的宽度，即实际的设备屏幕。

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

•如果您使用 max-width ，当您更改桌面浏览器的大小时，CSS将更改为不同的媒体查询设置，您可能会看到样式为手机，例如触控式菜单。

移动网络的max-device-width和max-width有什么区别？

8 个答案: