CSS媒体查询：目标移动设备没有指定宽度，像素比例等

Question

比方说，我只是想针对每个平板电脑和手机，无论大小，是否有媒体查询呢？没有指定大小可以做到这一点？或者正在使用大小来定位移动设备，而不是桌面？

Answer 1

在CSS3 spec中提到了@media handeld，但它可能没有浏览器支持。

所以，没有。

但是，您可能会发现this site有用，它解释了其他一些移动媒体查询技术。

Answer 2

我一直在为此奋斗了几天，但检查手持设备的好方法是最大设备宽度。台式电脑不会将此发送给浏览器，但大多数（如果不是全部）手持设备都使用此功能。

在我来说，我想证明上的所有设备（包括台式机）低于一定宽度的时候，我使用该网站的压缩版本

@media all and (max-width: 640px)

但是，使用的规定覆盖弹出position: fixed只能在手持设备上更改（因为css属性适用于所有桌面浏览器，但不适用于所有手持设备）。所以我用了一个附加规则：

@media all and (max-device-width: 640px)

我在其中低于目标640个，但不是桌面浏览器所有的手持设备。顺便说一句，这也不针对iPad（这是我想要的），因为它具有比640px更高的设备宽度。

如果您只想定位所有设备，只需选择一个最小宽度（1px），以便它不会排除任何设备，无论宽度如何。

Answer 3

我不认为你会有纯粹的css方法运气太多。你会想按照modernizer.js方法和我们JS的方式来做一些事情来检测设备，并在此基础上为类添加一个类名。

What is the best way to detect a mobile device in jQuery?

然后在您的媒体查询大小不等的特殊情况，移动设备是一流的。