使用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
}

- mmmoustache

Answer 1

也许看一下this，在"7.3 已识别的媒体类型"部分，会对你有所帮助。

- Paolo Stefan

---

谢谢你的提示，这似乎适用于横向模式，但纵向模式被忽略了！有什么想法为什么会发生这种情况吗？我只是在上面的代码中交换了“only screen”和“only handheld”。 - mmmoustache

我看到你编辑了自己的问题并回答了自己，但你可能会对使用min-width和max-width而不是min-device-width和max-device-width感兴趣。 - Paolo Stefan

是的，你的回答真的很有帮助！我会试一试的，听起来像是我需要整理一下代码。再次感谢！ - mmmoustache

Answer 2

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

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

什么使您的风格不适用于非iPad设备？

- Paul D. Waite

---

啊，原来如此！可惜的是，设计师将网站设计成1040像素宽，所以我只需要微调CSS即可。 - mmmoustache

@mmmoustache：这真是令人沮丧。我建议只针对宽度进行调整 - 支持媒体查询的浏览器用户将从您的微调样式中受益，即使他们将浏览器窗口大小缩小到1040以下。 - Paul D. Waite

Answer 3

我发现你在编辑中只需要第二个媒体查询：

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

它就像魔法一样好用！

- Christopher Bradshaw