Treehouse: Grow your CSS skills. Land your dream job.

Target iPad, iPad only.

  • # July 7, 2011 at 10:08 am

    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) 


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

    # July 7, 2011 at 12:01 pm

    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.

    # July 7, 2011 at 12:02 pm

    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.

    # July 7, 2011 at 12:17 pm

    Would this work?

    @media handheld and (min-device-width: 768px) and (max-device-width: 1024px) {
    # July 8, 2011 at 8:43 am

    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.

    # July 27, 2011 at 4:40 am

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

    # May 21, 2013 at 11:36 pm

    try to use viewport work in portrait and lanscape

    # May 25, 2013 at 4:11 pm

    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.