针对具有CSS (iPad, iPhone)的移动设备，但不包括非移动设备

I'm trying to target mobile devices (specifically the iPad and iPhone) but using CSS3 media queries the same styling is added to other devices with the same resolution, such as laptops. How can I add mobile device specific styling without adding it to other non-mobile devices too?

我想针对的是移动设备(特别是iPad和iPhone)，但使用CSS3媒体查询，同样的样式会被添加到具有相同分辨率的其他设备上，比如笔记本电脑。我如何添加移动设备特定的样式，而不将它添加到其他非移动设备?

So far I'm using this, which adds the css to all devices that are 1024px wide and under, even with the orientation selector:

到目前为止，我正在使用这个，它将css添加到所有1024px宽以下的设备中，即使使用方向选择器:

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                       (max-device-width: 1024px) and (orientation:landscape){
           // Do something
}

EDIT: For anyone interested, I got this to work just by duplicating the media query but altering the duplicate slightly. It's by far the most efficient way of doing it but the main thing is it works:

编辑:对于任何感兴趣的人，我通过复制媒体查询而使其工作，但稍微修改副本。这是迄今为止最有效的方法，但主要的是它能起作用:

@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
}

3 个解决方案

#1

Maybe a look at this, at the section "7.3 Recognized media types", will help you.

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

#2

Yup: desktop browsers support the orientation media query too.

是的:桌面浏览器也支持定向媒体查询。

I don’t think media queries provide a way to detect whether a device is the iPad or the iPhone. They allow you to inspect features of the device (like its width and orientation), rather than identify the device.

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

What makes your styles inappropriate for non-iPad devices?

是什么让你的风格不适合非ipad设备?

#3

I found that all you need is the second media query in your edit:

我发现你所需要的只是你编辑中的第二个媒体查询:

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

It worked like a charm!

它起了很大的作用!

#1