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

Question

通过 CSS 媒体查询，您可以使用最大设备宽度来定位设备宽度（例如 iPhone 或 Android 设备）和/或定位页面宽度的最大宽度。

如果您使用max-device-wide，当您更改桌面上浏览器窗口的大小时，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... */
}

我倾向于同时使用< code >最大设备宽度和< code >最大宽度。

Answer 1

如果您使用最大宽度，当您更改桌面上浏览器窗口的大小时，可能会显示面向移动的样式，例如触摸友好的元素和菜单等。

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

2000年代中期，当整个设计界选择固定布局而非液体布局时，这是因为文本回流阻碍了易读性，通常会导致寡妇和其他打字错误。此外，从一个设计到另一个设计，维护代码库通常是很棘手的，以防止元素冲突等。液态布局和响应式设计之间的唯一区别是响应式设计，由于更好的浏览器和类似于砖石结构的框架的激增，它更容易完成。

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

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

Answer 2

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

对于IOS来说，这似乎很简单，至少在Safari中如此。这似乎是一个独立于方向的单个器件宽度响应。此外，设备宽度仅针对设备的较短侧。我确实在iPhone 4S和iPad上测试了这个。无论什么方向，他们都分别对320和768做出了反应。

对于Android来说，这更不可预测。我在一台华为Ascend Y330上测试了六款浏览器(Android默认浏览器，Chrome，Opera，Firefox，Firefox Beta，Dolphin)。响应因浏览器类型和方向而异。

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

Answer 3

如果您正在制作一个响应式网站，请在媒体查询中使用最小宽度/最大宽度，而不是设备最小宽度/设备最大宽度，以便针对更大范围的屏幕尺寸。

根据2018 Media Queries Level 4规范草案，设备宽度媒体功能已弃用。将保留它以实现向后兼容性，但应避免使用。

8.附录A：不推荐的媒体功能

要查询视窗(或页面媒体上的页面框)的大小，应使用< code>width 、< code>height和< code>aspect-ratio媒体功能，而不是< code>device-width 、< code>device-height和< code>device-aspect-ratio，它们指的是设备的物理大小，而不考虑有多少空间可用于布局的文档。< code>device-*媒体功能有时也用作检测移动设备的代理。相反，作者应该使用能更好地代表他们试图设计的设备外观的媒体特征。

作为旁注，请记住在中指定视口元标记

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

由于给定设备可能具有所有不同的屏幕分辨率和像素密度，像素不是像素，因为有几个因素需要考虑（缩放、像素密度、屏幕分辨率和大小、设备方向、纵横比等）。在这种情况下，像素实际上被称为“光学参考单元”，而不是物理硬件像素。

幸运的是，您可以在

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

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

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

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

截至2018年，最新的媒体查询规范草案实际上已经否决了< code >设备宽度媒体功能，因此应该避免使用。

此外，这篇关于 Google 开发者的文章强烈建议不要使用最大设备宽度：

Google Developers-Web基础知识-响应式CSS媒体查询

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

差异很微妙，但非常重要：最小宽度基于浏览器窗口的大小，而最小设备宽度基于屏幕的大小。遗憾的是，某些浏览器（包括旧版 Android 浏览器）可能无法正确报告设备宽度，而是以设备像素而不是预期的视口宽度报告屏幕大小。

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

< li>Quirksmode.org -像素不是像素不是像素 < li>W3 -媒体查询级别4规范 < li>Google开发人员- Web基础知识-视口 < li>Google开发人员- Web基础知识-响应CSS媒体查询 < li>MDN -使用viewport meta标记来控制移动浏览器上的布局