我应该使用最大设备宽度还是最大宽度？

Question

借助 CSS 媒体查询，您可以使用 max-device-width 来定位设备宽度（例如 iPhone 或 Android 设备）和/或 max-width 来定位页面宽度。

如果您使用max-device-width，当您更改桌面上浏览器窗口的大小时，CSS 不会更改，因为您的桌面不会更改大小。

如果您使用max-width，当您更改桌面浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单等。

现在不推荐以特定浏览器（和设备？）为目标，您应该对自己的目标更加不可知论。这也适用于媒体查询吗？

你为什么要针对一个而不是另一个？哪个是推荐的？

这是我在生产网站上使用的媒体查询示例：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (min-device-height: 480px) and (max-device-height: 640px) {  
    /* Change a menu to fit the screen better, etc... */
}

我倾向于同时使用max-device-width 和max-width。

Answer 1

TL;DR

如果您正在制作响应式网站，请在媒体查询中使用 min-width/max-width 而不是 min-device-width/max-device-width，以便定位更广泛的屏幕尺寸。

根据 2018 年的 Media Queries Level 4 specification draft，device-width 媒体功能已弃用。将保留它以实现向后兼容性，但应避免使用。

8. Appendix A: Deprecated Media Features

要查询视口（或页面媒体上的页面框）的大小，应使用width、height 和aspect-ratio 媒体功能，而不是device-width、device-height 和@ 987654346@，它指的是设备的物理尺寸，无论有多少空间可用于布置的文档。 device-* 媒体功能有时也用作检测移动设备的代理。相反，作者应该使用能够更好地代表他们尝试设置样式的设备方面的媒体功能。

作为旁注，请记住在文档的 <head> 部分中指定 viewport meta tag：

<meta name="viewport" content="width=device-width, initial-scale=1">

---

说明

由于给定设备可能具有的所有不同可能的屏幕分辨率和像素密度，a pixel is not a pixel 因为有几件事情需要考虑（缩放、像素密度、屏幕分辨率和尺寸、设备方向、纵横比等） ..)。在这种情况下，像素实际上称为"optical reference unit"，而不是物理硬件像素。

幸运的是，您可以在文档的<head> 部分指定viewport meta tag，以控制浏览器视口的宽度和缩放比例。如果此标记的content 值为width=device-width，则屏幕的宽度将为match the device independent pixels，并确保所有不同设备的缩放和行为一致。

<meta name="viewport" content="width=device-width, initial-scale=1">

就媒体查询而言，您可能希望使用max-width 而不是max-device-width，因为max-width 将针对视口（当前浏览器窗口），而max-device-width 将针对设备的实际全屏尺寸/分辨率。

换句话说，如果您使用max-device-width，则在调整桌面浏览器大小时不会看到应用了不同的媒体查询，因为与max-width不同，仅考虑设备的实际全屏尺寸；不是浏览器窗口的当前大小。

如果您尝试创建自适应布局，这会产生巨大的影响，因为在调整浏览器大小时网站不会响应。此外，如果您使用max-device-width，则您用于定位具有较小屏幕的设备的媒体查询将不适用于桌面，即使将浏览器窗口缩小以匹配所述较小的屏幕尺寸也是如此。

截至 2018 年，最新的 media query specification draft 实际上已弃用 device-width 媒体功能，因此应避免使用。

此外，这个article on Google Developers 非常不鼓励使用max-device-width：

Google Developers - Web Fundamentals - Responsive CSS media queries

也可以基于*-device-width创建查询；尽管强烈反对这种做法。

区别很微妙但非常重要：min-width 是基于浏览器窗口的大小，而min-device-width 是基于屏幕的大小。遗憾的是，某些浏览器（包括旧版 Android 浏览器）可能无法正确报告设备宽度，而是以设备像素为单位报告屏幕尺寸，而不是预期的视口宽度。

此外，使用*-device-width 可以防止内容适应桌面或其他允许调整窗口大小的设备，因为查询是基于实际设备大小，而不是浏览器窗口的大小。

延伸阅读：

• Quirksmode.org - A pixel is not a pixel is not a pixel
• W3 - Media Queries Level 4 Specification
• Google Developers - Web Fundamentals - Viewport
• Google Developers - Web Fundamentals - Responsive CSS media queries
• MDN - Using the viewport meta tag to control layout on mobile browsers

Answer 2

避免设备宽度。原因是你无法知道用户的浏览器是如何响应的。

对于 IOS 来说，这似乎很简单，至少 Safari 是这样。它似乎是一个独立于方向的单一设备宽度响应。此外，设备宽度仅针对设备的较短边进行说明。我确实在 iPhone 4S 和 iPad 上对此进行了测试。不管什么方向，他们确实分别响应了 320 和 768。

对于 Android，它更难以预测。我在华为 Ascend Y330 上测试了六款浏览器（Android 默认浏览器、Chrome、Opera、Firefox、Firefox Beta、Dolphin）。响应因浏览器类型和方向而异。

我在一个带有查询（最大设备宽度：***px）的页面上进行了测试，并找出我需要填写什么 px 值才能使查询处于真实状态。根据浏览器类型和方向，需要四个不同的值（320、480、534、800）。这使得设备宽度无法使用。

Answer 3

如果您使用 max-width，当您在桌面上更改浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单之类的东西。

令我震惊的是，流行的观点似乎认为这是可取的。我还没有弄清楚移动之前的流体/液体设计是否因为错误或正确的原因被认为是不好的。在我看来，这只是流式布局的一种更高级的版本，但设计师出于某种原因正在接受它。

当整个设计界在 2000 年代中期选择固定布局而不是液体时，这是因为文本重排阻碍了易读性，通常会导致寡妇和其他印刷伪影。此外，从设计到设计，维护代码库通常很棘手，以防止元素发生冲突等。流动布局和响应式设计之间的唯一区别是响应式，由于更好的浏览器和类似砌体的框架的扩散使其更容易完成。

我个人使用最小/最大设备宽度，因为我更喜欢遵循具有数十年优先权的桌面文档约定。并非您在 Internet 上打开的所有文档都会在桌面上以这种方式运行，您在桌面上加载的其他类型的文档或应用程序也不会如此。在移动设备主导之前设计的页面，就像 MS Word、Photoshop 等一样，保持滚动位置，不改变布局，允许用户在执行无关的窗口管理任务时跟踪页面流中的内容。

我通常使用 3 个断点：一个用于手机，一个用于平板电脑，一个用于台式机。桌面，通常至少是横向肖像是固定的，而平板电脑的肖像及以下是流动的。这种自适应和响应式的结合使桌面可以像桌面站点一样运行，同时让我无需布局 10 多个单独的固定宽度移动设备布局。文本不会在移动设备上重排，因为无法调整视口大小。