【发布时间】：2017-06-10 09:17:30
【问题描述】：
我正在尝试进行设备检测（针对智能手机、平板电脑和笔记本电脑），结果我发现了这个SITE，它几乎显示了我所需要的一切。 不幸的是，有人告诉我这些查询（例如：设备宽度）已被弃用！
有什么解决办法吗？
【问题讨论】：
标签： html css media-queries screen device
【发布时间】：2017-06-10 09:17:30
【问题描述】：
从我目前的实践来看，我可以告诉你，特定于设备的媒体查询绝对不是正确的做法。您刚刚发布的The thread 也包含此声明：
如果您对此的反应是：您不应该将断点基于设备！你说得很好。
移动优先方法也是我不实践的东西。 （从最小宽度向上）
适合我所有项目的最佳实践，无论是应用程序还是简单的网站，都包含 max-width 媒体查询，从您的主要分辨率开始，以最小的分辨率结束可能的画面。
诀窍不是使用一组严格的分辨率，而是在调整视口大小时针对您的特定问题使用所需的分辨率。
只需转到 MDN and read about media queries。仅对 1920 像素以上的分辨率使用最小宽度查询，对较低分辨率使用最大宽度。
您可以放心使用的最通用的媒体查询：
@media screen and (max-width: *px) {}
其中 * 是您要处理的视口宽度的像素宽度值。
【讨论】：
-
谢谢您的建议，但我不应该也使用 webkit-device-pixel-ratio 吗？
-
设备像素比不是一种标准的处理方式，这意味着它在所有浏览器中都不会像您期望的那样工作。在处理标准时，总是先询问 MDN。 developer.mozilla.org/en-US/docs/Web/CSS/@media/…
所有 Sqnkov wirtten here 都适用，所以在大快捷方式中使用 max/min-width 代替。
但是总是有一个但是，这就是为什么...如果您对像素完美解决方案感兴趣，您应该考虑将max/min-resolution 用于现代浏览器和device-pixel-ratio 用于旧浏览器 (CanIUse: Media Queries: resolution feature) 用于检测高 dpi 屏幕。这背后的原因是不要强迫用户在使用此类显示器（即视网膜显示器或 4k 游戏屏幕）时使用放大镜。关于在哪里以及如何放置断点的话题，我真的很喜欢 Responsive UI Material Design 指南的章节。他们使用dp 单位，这是基于屏幕密度的相对单位（更多关于主题here (Material) 和here (MDN)）。如果您喜欢他们在响应方面所做的工作，只需从F12 开发工具下检查他们的 CSS 规则，它们（在撰写本文时）如下所示：
@media only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:800px),
only screen and (min--moz-device-pixel-ratio:2) and (max-width:800px),
only screen and (min-resolution:192dpi) and (max-width:800px),
only screen and (min-resolution:2dppx) and (max-width:800px)
换句话说，为了长话短说并完善 Sqnkovs 的答案，您可能还需要考虑屏幕密度。
【讨论】：
如果您需要调整样式以适应浏览器窗口的大小，请使用max-width or min-width。无论如何，这比使用已弃用的device-width 功能更加用户友好，因为这意味着喜欢调整浏览器窗口大小以仅占屏幕宽度一半的桌面用户将可以合理地呈现您的网站而不是强制水平滚动。
如果您确实在尝试进行设备检测（例如，解决 iPhone 特有的错误，或者根据用户的特定智能手机型号是否是该店可以使用的型号，有条件地显示手机维修店的广告） with)，尝试通过其User-Agent 识别设备，在提供您的页面之前在服务器端或通过navigator.userAgent 在JavaScript 中识别。在大多数情况下，尝试使用device-width 和device-height 进行设备检测是疯狂；有 数以千计 种不同的智能手机型号，因此很可能其中一种与您正在测试的设备具有相同的尺寸，因此会触发误报。
（您还应该考虑是否真的需要feature detection而不是设备检测。）
【讨论】：