使用 CSS 定位移动设备(iPad、iPhone)，但排除非移动设备

Question

我正在尝试定位移动设备（特别是iPad和iPhone），但使用CSS3媒体查询将相同的样式添加到具有相同分辨率的其他设备，例如笔记本电脑。如何在不将其添加到其他非移动设备的情况下添加特定于移动设备的样式？

到目前为止，我正在使用这个，它将 css 添加到所有 1024px 宽及以下的设备，即使使用方向选择器也是如此：

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                       (max-device-width: 1024px) and (orientation:landscape){
           // Do something
}

编辑：对于任何感兴趣的人，我只需复制媒体查询但稍微更改重复项即可使其工作。这是迄今为止最有效的方法，但最主要的是它有效：

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                   (max-device-width: 1024px) and (orientation:landscape){
       // some styling
}
@media only screen and (min-device-width: 320px) and (orientation:portrait),
                   (max-device-width: 768px) and (orientation:portrait){
       // some styling
}

Answer 1

也许看看

这个，在"7.3 公认的媒体类型"一节中，会对你有所帮助。

Answer 2

是的：桌面浏览器也支持orientation媒体查询。

我不认为媒体查询提供了一种检测设备是iPad还是iPhone的方法。它们允许您检查设备的特征（如其宽度和方向），而不是识别设备。

是什么让你的风格不适合非 iPad 设备？

Answer 3

我发现您所需要的只是编辑中的第二个媒体查询：

@media only screen and (min-device-width: 320px) and (orientation: portrait),
   (max-device-width: 768px) and (orientation: portrait) {
   // some styling
}

它就像一个魅力！