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