Question

我正在尝试进行设备检测（适用于智能手机，平板电脑和笔记本电脑），最后我在SITE显示了我所需要的全部内容。不幸的是，我被告知这些查询（例如：device-width）已被弃用！

这有什么解决方法吗？

Answer 1

从我的实践到目前为止，我可以说特定于设备的媒体查询绝对不是正确的做法。您刚发布的The thread也包含此声明：

如果你对此反应如下：你永远不应该把你的断点建立在设备上！你有一个好点。

移动优先方法也是我不练习的事情。 （从最小宽度开始）

适合我所有项目的最佳做法，无论是应用程序还是简单的网站，都包含 max-width 媒体查询，这些查询从您的主要分辨率开始，最小化完成可能的屏幕。

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

只需转到 MDN and read about media queries 即可。仅对1920px以上的分辨率使用最小宽度查询，对较低分辨率使用最大宽度。

您可以放心使用的大多数通用媒体查询，而不必担心：

`@media screen and (max-width: *px) {}`

其中*是您要寻址的视口宽度的像素宽度值。

Answer 2

所有Sqnkov wirtten here都适用，所以在大捷径中使用max/min-width代替。

但总有一个但是这就是原因......如果您对像素完美解决方案感兴趣，您应该考虑为现代浏览器添加武器库max/min-resolution，为旧版浏览器添加device-pixel-ratio（{1}} {3}}）用于检测高dpi屏幕。这背后的原因是当使用这种显示器，即视网膜显示器或4k游戏屏幕时，不强迫用户使用放大镜。关于在何处以及如何设置断点的主题我非常喜欢CanIUse: Media Queries: resolution feature材料设计指南章节。他们使用dp单位，这是基于屏幕密度的相对单位（更多关于主题Responsive UI和here (Material)）。如果你喜欢他们在响应性方面所做的事情，只需从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的答案，你可能也想考虑屏幕密度。

Answer 3

如果您需要根据浏览器窗口的大小调整样式，请使用max-width or min-width。无论如何，这比使用已弃用的device-width功能更加用户友好，因为这意味着希望将浏览器窗口的大小调整为仅占据屏幕一半宽度的桌面用户可以合理地呈现您的网站，并且不必强制水平滚动。

如果您确实在尝试进行设备检测（例如，解决iPhone特定的错误，或者根据用户的特定智能手机型号是否是该商店可以使用的型号，有条件地为手机维修店显示广告，），请尝试在服务器页面之前通过服务器端的User-Agent来识别设备，或者通过navigator.userAgent使用JavaScript来识别设备。在大多数情况下，尝试使用device-width和device-height进行设备检测是 crazy ；有成千上万种不同的智能手机型号，因此很可能其中之一的尺寸与您要测试的设备相同，因此会触发误报。

（您还应该考虑是否真的需要feature detection而不是设备检测。）

媒体查询已弃用？

3 个答案:

`@media screen and (max-width: *px) {}`