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

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

max-width 是目标显示区域的宽度，即浏览器的当前大小。

Answer 5

区别在于 max-device-width 是整个屏幕的宽度，而 max-width 是指浏览器显示页面所使用的空间。但另一个重要的区别是 Android 浏览器的支持，事实上，如果你要使用 max-device-width ，这只适用于 Opera，相反，我确信 max-width 适用于各种移动浏览器（我已经在 Chrome、firefox 和 Opera for ANDROID 中测试过它）。

Answer 6

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

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

• 如果您使用最大宽度，当您更改桌面上浏览器的大小时，CSS 将更改为不同的媒体查询设置，并且您可能会看到移动设备的样式，例如作为触摸友好菜单。

Answer 7

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

不要使用设备宽度或设备高度。而是在 CSS 媒体查询中使用宽度或高度，因为 Android 设备会出现设备宽度或设备高度问题。对于 iOS 来说，它工作得很好。仅 Android 设备不支持 device-width/device-height。

Answer 8

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

device-width、device-height 和 device-aspect-ratio 在媒体查询级别 4 中已弃用：
https://developer.mozilla.org/en-US/ docs/Web/CSS/@media#Media_features

只需将宽度/高度（没有最小/最大）与方向和方向结合使用即可。针对特定设备的（最小/最大）分辨率。移动设备上的宽度/高度应与设备宽度/高度相同。