Html 媒体查询已弃用？

我试图做一个设备检测（用于智能手机、平板电脑和笔记本电脑），结果我发现我所需要的几乎都是这个。 不幸的是，我被告知这些查询（例如：设备宽度）已被弃用

---

有什么解决方法吗？

从我目前的实践来看，我可以看出特定于设备的媒体查询绝对不是正确的做法。您刚才发布的内容还包括以下声明：

如果您对此的反应是：您永远不应该将断点建立在设备上！！你说得很对

移动优先的方法也是我不实践的事情（从最小宽度向上）

适合我所有项目的最佳实践，无论是应用程序还是简单的网站，都包含最大宽度媒体查询，从主分辨率开始，在尽可能小的屏幕上结束

诀窍不是使用一组严格的分辨率，而是在调整视口大小时使用特定问题所需的分辨率

只需转到。仅对1920像素以上的分辨率使用最小宽度查询，对于较低分辨率，请坚持使用最大宽度查询

您可以放心使用的最通用的媒体查询：

@媒体屏幕和（最大宽度：*px）{}

---

其中，*是要处理的视口宽度的像素宽度值。

所有Sqnkov都适用，因此在大快捷方式中使用

max/min width

但总有一个但是，这就是为什么。。。如果你对像素完美的解决方案感兴趣，你应该考虑为现代浏览器添加阿森纳<代码>最大/最小分辨率< /代码>和<代码>设备像素比旧的（）用于检测高DPI屏幕。这背后的原因是，在使用视网膜显示器或4k游戏机屏幕等显示器时，不会强迫用户使用放大镜。关于断点的位置和放置方式，我非常喜欢《材料设计指南》的一章。他们使用

dp

单位，这是基于屏幕密度的相对单位（更多关于主题和主题）。如果您喜欢他们在响应性方面所做的工作，只需在

F12

dev tools下检查他们的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答案，您可能还需要考虑屏幕密度。

如果您需要根据浏览器窗口的大小调整样式，请使用。无论如何，这比使用不推荐使用的功能更方便用户，因为这意味着喜欢调整浏览器窗口大小使其仅占屏幕宽度一半的桌面用户将能够明智地呈现您的站点，而不会被迫水平滚动

如果你真的想做设备检测（例如，解决iPhone特定的bug，或者根据用户的特定智能手机型号是否是手机维修店的产品，有条件地显示手机维修店的广告），试着通过手机识别设备，在为页面提供服务之前使用服务器端或通过

navigator.userAgent

使用JavaScript。在大多数情况下，试图使用

设备宽度

和

设备高度

进行设备检测是疯狂的；有数千种不同的智能手机型号，因此很可能其中一款与您测试的设备大小相同，因此会触发误报

---

（你也应该考虑你是否真的需要，而不是设备检测）

谢谢你的建议，但是我也不应该使用WebKIT设备像素比率吗？设备像素比率不是一个标准的做事方式，这意味着它不会像你期望的那样工作，在所有浏览器中。在处理标准时，始终首先询问MDN。可能重复的