3

我正在尝试针对移动设备（特别是 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
}
4

3 回答 3

1

也许看看这个，在“7.3 识别的媒体类型”部分，会对你有所帮助。

于 2012-04-11T08:53:45.180 回答
1

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

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

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

于 2012-04-11T09:14:41.723 回答
0

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

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

它就像一个魅力！

于 2015-08-27T00:28:36.703 回答