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

【问题标题】：What is the difference between max-device-width and max-width for mobile web?移动网络的最大设备宽度和最大宽度有什么区别？
【发布时间】：2011-10-08 12:02:22
【问题描述】：

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

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

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

有什么区别？

【问题讨论】：

相关：Should I use max-device-width or max-width?
我发现max-device-width 可以工作，即使<meta name="viewport" ...> 标签不包含在小屏幕设备中，max-width 在没有meta 标签的情况下也不能工作

标签： css mobile-website media-queries

【解决方案1】：

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是目标显示区域的宽度，表示浏览器当前的大小。

【讨论】：

@media all and (max-width: 400px) { } 有什么区别

【解决方案2】：

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

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

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

【讨论】：

如果您想在调整浏览器大小时看到变化，请使用 max-width 进行开发，尽管 max-device-width 对于生产更准确。
@JohnMagnolia 是什么让您认为 max-device-width 更适合生产？无论设备如何，最大宽度都不能保证更好的响应能力吗？
@eknown 我同意。来自各种技能/知识的用户并不总是最大化他们的桌面浏览器窗口（但我还没有看到没有最大化打开浏览器的平板电脑或手机 - 我想在混合应用程序中是可能的，但是是另一种情况）。最大宽度肯定会更通用。
@eknown 我不同意。根据您的样式，您在点击该媒体断点后可能会有非常不同的外观，如果您基于媒体断点加载样式表，则在调整浏览器窗口大小时，网站呈现完全不同的外观可能会非常不和谐。跨度>
如果您的移动设备布局完全不同，可能根本原因是因为没有鼠标光标（它们需要更大的按钮和单列滚动）。在这种情况下，一个很好的媒体查询是@media screen and (pointer: coarse) and (hover: none)，它将切换到移动版本，无论未来移动设备在其屏幕中包含多少像素。

【解决方案3】：

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

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

【讨论】：

这个答案对我来说比接受的答案更好地“点击”。听起来对于大多数应用程序来说，max-width 和 max-height 将是可以使用的。
@JackieChiles 在另一个应该考虑的 SO 线程中提出了一个很好的观点（关于出现在较大设备上的移动样式）：stackoverflow.com/questions/8564752/…
这个好答案并不完整：方向在 Android 上交换设备宽度和设备高度，但在 iOS 上不交换：参见quirksmode.org/blog/archives/2010/04/the_orientation.html。

【解决方案4】：

不同之处在于 max-device-width 是所有屏幕的宽度，而 max-width 表示浏览器用于显示页面的空间。但另一个重要的区别是对安卓浏览器的支持，事实上如果你要使用 max-device-width 这将只在 Opera 中有效，相反我确信 max-width 将适用于每一种移动浏览器（我已经在 Chrome、firefox 和 Opera for ANDROID 中对其进行了测试。

【讨论】：

【解决方案5】：

你觉得使用这种风格怎么样？

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

【讨论】：

不回答问题，实际上是处理断点的不好方法 - 小心。

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

不推荐使用普通的“device-xxx”项，不推荐使用“max-device-xxx”项。
@RogerKrueger 你确定吗？我没有看到任何迹象表明 max-device-xxx 媒体查询未被弃用。

【解决方案8】：

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

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

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

【讨论】：