Target iPad, iPad only.

[dpersson]

Hi there. I’m currently working on a project, and I need to do some iPad specific styling.
Is it possible to target just iPad?

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) 

and

@media (max-device-width: 1024px) and (orientation: landscape)

both targets a lot more than the iPad, for instance a bunch of laptops. I want to target the iPad specifically. Is that possible with media queries?

[TheDoc]

From Perishable Press

/* iPad [portrait + landscape] */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {



}

Something about using ‘only screen’, but I’m no expert.

[TheDoc]

So much for reading your post… it’s still morning for me, forgive me.

I’m not sure why laptops are picking up that first one though. I was under the impression that min-DEVICE-width shouldn’t do that.

[markthema3]

Would this work?

@media handheld and (min-device-width: 768px) and (max-device-width: 1024px) {

}

[dpersson]

markthema3: I tried media type handheld, but it didn’t work. I’m pretty sure handheld targets older cell phones and not smart phones or iPad.

TheDoc: Device can be any type of device with I guess.

[dpersson]

Found a snippet here on CSS-tricks that seems to work very well. “@media only screen and (device-width: 768px)”

[dannypaler]

try to use viewport work in portrait and lanscape

[macharborguy]

Just an update to an old post, for the sake of new information.

There is currently no way to differentiate between a 9.7″ iPad and then 7.9″ iPad Mini other than via some sort of user interaction. Keep this in mind when designing for the iPad/iPadMini.

[Author]

Posts