Targeted mobile devices with CSS (iPad, iPhone) but exclude non-mobile devices

I'm trying to target mobile devices (iPad and iPhone in particular), but with CSS3 multimedia queries, the same style is added to other devices with the same resolution as laptops. How to add style to a mobile device without adding it to other non-mobile devices?

So far I have been using this, adding css to all devices with a width of 1024 pixels and below, even with an orientation selector:

@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 duplicating the media query, but slightly changing the duplicate. This is by far the most efficient way to do this, but most importantly, 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
}