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

Question

比方说，我只想定位每台平板电脑和手机，而不管尺寸如何，是否有媒体对此进行查询？是否可以在不指定大小的情况下执行此操作？还是使用尺寸作为定位移动设备而非台式机的唯一方法？

Answer 1

在 CSS3规范中，提到了@media handeld，但它可能不支持浏览器。

所以，不。

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

Answer 2

我已经为此苦苦挣扎了几天，但是检查手持设备的好方法是最大设备宽度。台式机不会将其发送到浏览器，但是大多数（如果不是全部）手持设备都使用此功能。

对于我来说，我想在低于一定宽度的情况下在所有设备（包括台式机）上显示网站的压缩版本，为此我使用了

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

但是使用position: fixed的某些叠加弹出窗口仅必须在手持设备上进行更改（因为css属性在所有台式机浏览器中均有效，但在所有手持设备上均不可用）。为此，我使用了一条附加规则：

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

我以640以下的所有手持设备为目标，而不是台式机浏览器。顺便说一句，这也不适用于iPad（这正是我想要的），因为它的设备宽度大于640像素。

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

Answer 3

我认为纯CSS方法不会给您带来太多运气。您将需要按照modernizer.js方法和我们的JS来做一些事情，以检测设备并根据该名称将一个类名附加到主体上。

什么是最好的方法在jQuery中检测移动设备？

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