Forums

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

  <meta name="viewport" content="user-scalable=no, initial-scale=0.77, minimum-scale=0.77, maximum-scale=0.77, width=device-width">

treehouse : what would you like to learn today?

Forums

Target iPad, iPad only.