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认可的媒体类型”部分，查看this可能会对您有帮助。

Answer 2

是的：desktop browsers support the orientation media query too。

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

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

使用CSS（iPad，iPhone）定位移动设备，但不包括非移动设备

2 个答案: