CODEWITHSUNDEEP
iphoneipadcssmedia-queries
mmmoustache
mmmoustache

Reputation: 2323

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

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?

So far I'm using this, which adds the css to all devices that are 1024px wide and under, even with the 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 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
}

Upvotes: 4

Views: 3679

Answers (3)

Christopher Bradshaw
Christopher Bradshaw

Reputation: 2783

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!

Upvotes: 0

Paul D. Waite
Paul D. Waite

Reputation: 98926

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.

What makes your styles inappropriate for non-iPad devices?

Upvotes: 1

Paolo Stefan
Paolo Stefan

Reputation: 10283

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

Upvotes: 1

Related Questions