我应该使用最大设备宽度还是最大宽度？
Posted
技术标签:
【中文标题】我应该使用最大设备宽度还是最大宽度？【英文标题】：Should I use max-device-width or max-width? 【发布时间】：2013-09-01 06:57:51 【问题描述】：借助 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。
【问题讨论】：
device-width 现已弃用 developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width 【参考方案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【讨论】：
同意你所说的一切，但忘记它的向后兼容性方面，这在几年内不会相关。既然我们现在有了手机，为什么桌面网站的工作方式会有所不同？ 我只是认为移动网站不应该显示在桌面上。您应该能够将浏览器调整为任何宽度并使用水平滚动条。假设您想比较 2 个网站的一部分但隐藏侧边栏，您将在 2 个窗口中打开并并排调整大小 我同意约翰 M 的观点，谷歌是错误的，我个人发现他们的响应式设计“文档”是一些最糟糕的时尚驱动的东西，只是因为写它的孩子们都受雇才相信通过谷歌。我最初对此表示赞同，但在我看来答案是错误的，因为越来越多的网站正在破坏他们的桌面用户体验，完全没有必要适应一个尺寸适合所有响应式 css 框架（这样做只是为了缩短我的开发时间意见），并不意味着您必须破坏桌面用户的体验。我们不这样做，并将转化次数提高了 10 倍。 "如果此标签的内容值为width=device-width，则屏幕的宽度将与设备无关像素匹配。"如果您在 ios 设备上浏览，而不是dps，它将对应于，什么？ iOS 积分？ （顺便说一句，非常感谢你的这篇文章！）
答案有点过时了。 max-device-width 没有任何问题，如果您想在可调整大小的视口环境（桌面）中使用它，这一点很重要。 min-device-width 还是很糟糕。【参考方案2】：
避免设备宽度。原因是你无法知道用户的浏览器是如何响应的。
对于 IOS 来说，这似乎很简单，至少 Safari 是这样。它似乎是一个独立于方向的单一设备宽度响应。此外，设备宽度仅针对设备的较短边进行说明。我确实在 iPhone 4S 和 iPad 上对此进行了测试。不管什么方向，他们确实分别响应了 320 和 768。
对于 Android，它更难以预测。我在华为 Ascend Y330 上测试了六款浏览器（Android 默认浏览器、Chrome、Opera、Firefox、Firefox Beta、Dolphin）。响应因浏览器类型和方向而异。
我在一个带有查询（最大设备宽度：***px）的页面上进行了测试，并找出我需要填写什么 px 值才能使查询处于真实状态。根据浏览器类型和方向，需要四个不同的值（320、480、534、800）。这使得设备宽度无法使用。
【讨论】：
device-width 是了解用户正在使用的设备的唯一可靠方法，因此您可以相应地调整布局。当您根据视口中的像素调整布局时，您最终会因为用户放大而在某些桌面上进行移动设计。这通常会导致与用户想要的相反（只是放大一点） 您应该使用不报告准确设备宽度的移动浏览器提交错误报告。在许多情况下，我发现替代浏览器默认设置为假装它们是桌面浏览器，并且每个 CSS 像素使用 1 个设备像素 - 这很可能是您遇到的问题。【参考方案3】：如果您使用 max-width，当您在桌面上更改浏览器窗口的大小时，您可能会看到面向移动设备的样式，例如触摸友好的元素和菜单之类的东西。
令我震惊的是，流行的观点似乎认为这是可取的。我还没有弄清楚移动之前的流体/液体设计是否因为错误或正确的原因被认为是不好的。在我看来，这只是流式布局的一种更高级的版本，但设计师出于某种原因正在接受它。
当整个设计界在 2000 年代中期选择固定布局而不是液体时，这是因为文本重排阻碍了易读性，通常会导致寡妇和其他印刷伪影。此外，从设计到设计，维护代码库通常很棘手，以防止元素发生冲突等。流动布局和响应式设计之间的唯一区别是响应式，由于更好的浏览器和类似砌体的框架的扩散使其更容易完成。
我个人使用最小/最大设备宽度，因为我更喜欢遵循具有数十年优先权的桌面文档约定。并非您在 Internet 上打开的所有文档都会在桌面上以这种方式运行，您在桌面上加载的其他类型的文档或应用程序也不会如此。在移动设备主导之前设计的页面，就像 MS Word、Photoshop 等一样，保持滚动位置，不改变布局，允许用户在执行无关的窗口管理任务时跟踪页面流中的内容。
我通常使用 3 个断点：一个用于手机，一个用于平板电脑，一个用于台式机。桌面，通常至少是横向肖像是固定的，而平板电脑的肖像及以下是流动的。这种自适应和响应式的结合使桌面可以像桌面站点一样运行，同时让我无需布局 10 多个单独的固定宽度移动设备布局。文本不会在移动设备上重排，因为无法调整视口大小。
【讨论】：
有些手机可以调整视口的大小 - 例如，windows 允许将多个应用程序“捕捉”到屏幕上，并且一些 android 手机支持窗口化以同时查看两个应用程序。客观地说，我不明白为什么您不希望在屏幕较小的桌面上使用平板电脑样式的布局，但主观上这取决于布局。 我也在使用 min/max-device-width 但令我恐惧的是，客户端设置了 hotjar，它创建了用户与您的网站交互的小视频，我意识到新的 android 6 三星银河6 将 min/max-device-width 的像素数视为实际屏幕像素，而不是 css 像素，这当然会使页面脱离屏幕。在我们的案例中，用户使用这些 4x 像素密度屏幕获得了移动和桌面 css 的混合。就我个人而言，我认为响应式在做得好的桌面显示器上没有任何位置，对用户不利。所以要小心。 Paul，需要进行一些研究才能弄清楚发生了什么。在我看来，乔希的回答是错误的，谷歌也是如此。桌面应该响应式的概念只是谷歌等团体推动的一种时尚，各种尺寸适合所有 css 框架。我们的问题来自糟糕的 hotjar 编程，期间。我的触发点基本上将任何大屏幕设备视为桌面，稍加调整，然后向下到视口仅是移动设备的位置。对于寻求清晰的用户，我认为保罗的答案是正确的，而时尚驱动的响应式答案是错误的。 仅供参考——截至 2018 年，*-device-width 媒体功能实际上已在最新的媒体查询规范草案中被弃用 - drafts.csswg.org/mediaqueries-4/#mf-deprecated
这是一个旧答案，但即使在 2014 年，我也强烈反对这一点。通过养成遵循良好实践的习惯，可以轻松避免引用的那些印刷错误和“元素冲突”。随着时间的推移，屏幕分辨率变得越来越疯狂、真实、可扩展、响应式设计只会变得更加重要，而固定网站只会变得更加难以访问。以上是关于我应该使用最大设备宽度还是最大宽度？的主要内容，如果未能解决你的问题，请参考以下文章
CSS（最大宽度：320px）和（最大设备宽度：320px）之间的区别[重复]