css 媒体查询 : target mobile devices without specifying width, 像素比例等

Question

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

Answer 1

几天来我一直在努力解决这个问题，但是检查手持设备的一个好方法是最大设备宽度。台式电脑不会将此发送到浏览器，但大多数(如果不是全部)手持设备都会使用它。

在我的例子中，当低于一定宽度时，我想在所有设备(包括桌面)上显示网站的压缩版本，为此我使用了

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

但使用 position: fixed 的某个叠加弹出窗口必须仅在手持设备上进行更改(因为 css 属性适用于所有桌面浏览器，但不适用于所有手持设备)。所以为此我使用了一个额外的规则:

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

我在其中针对低于 640 的所有手持设备，但不针对桌面浏览器。顺便说一下，这也不针对 iPad(这正是我想要的)，因为它的设备宽度高于 640px。

如果您只想定位所有设备，只需选择较低的最小宽度 (1px)，这样无论宽度如何，它都不会排除任何设备。