针对带有CSS的移动设备（iPad、iPhone），但不包括非移动设备

我试图瞄准移动设备（特别是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
}

也许您可以在“7.3认可的媒体类型”部分查看一下。

是的：

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

---

是什么使您的样式不适合非iPad设备？

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

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

---

它就像一个符咒

感谢提示，这似乎适用于横向模式，但纵向模式被忽略！你知道为什么会这样吗？我在上面的代码中将“仅屏幕”替换为“仅手持”。我看到你编辑了你的问题并回答了自己，但你可能对使用最小宽度和最大宽度而不是最小设备宽度和最大设备宽度感兴趣。是的，你的回答真的很有帮助！我来试一试，听起来我需要整理一下代码。再次感谢！啊，这就是原因！不幸的是，设计师设计的网站是1040px宽，所以我只需要调整一下css@mmmoustache：啊，那太令人沮丧了。我建议只针对宽度，然后-使用支持媒体查询的浏览器的用户，如果他们将浏览器窗口的大小减少到1040以下，也将受益于您调整的样式。