我想要针对移动设备(尤其是iPad和iPhone)进行定位,但使用CSS3媒体查询时,相同分辨率的其他设备(例如笔记本电脑)也会添加相同的样式。我该如何添加仅针对移动设备而不添加到其他非移动设备的专用样式?
到目前为止,我正在使用以下代码,它将CSS添加到所有宽度为1024px及以下的设备上,即使使用方向选择器仍是如此:
到目前为止,我正在使用以下代码,它将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
}