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

Question

假设我只是想针对每个平板电脑和手机，无论大小，是否有媒体查询？是否可以在不指定尺寸的情况下执行此操作？或者使用大小是定位移动设备的唯一方式，而不是桌面？

Answer 1

我几天都在努力解决这个问题，但检查手持设备的好方法是max-device-width。台式机不会将其发送到浏览器，但大多数（如果不是全部）手持设备都使用此功能。

在我的情况下，我希望在低于特定宽度的所有设备（包括桌面）上显示该网站的压缩版本，我使用了

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

但是使用position: fixed的某个叠加弹出窗口只能在手持设备上更改（因为css属性适用于所有桌面浏览器，但不适用于所有手持设备）。因此，我使用了另一条规则：

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

我将所有手持设备定位在640以下但不是桌面浏览器。顺便说一句，这也不是针对iPad（这是我想要的），因为它的设备宽度高于640px。

如果您只是想要定位所有设备，只需选择一个较小的最小宽度（1px），这样就不会排除任何设备，无论宽度如何。

Answer 2

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

所以，没有。

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

Answer 3

我不认为你有一个纯粹的CSS方法运气太多。你想要按照modernizer.js的方法做一些事情，我们JS会检测设备并根据它将一个类名附加到body上。

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

然后在您的媒体查询中将该类包含在不同大小的特殊情况移动设备中。