How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Question

I am trying to use a media rule to target CSS to iPad only. I want to exclude iPhone/iPod and desktop browsers. I would like to to also exclude other mobile devices if possible.

I have used

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

but just found out that desktop Safari 4 reads it. I have tried variations with "481px" instead of "768px" and another that adds an orientation to that:

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

but no luck. (Later we will be sniffing user-agent strings for iPad, but for now that solution won't work.)

Thanks!

Update: it seems that desktop Safari uses the width and height of the screen at the moment and gives itself an orientation of portrait or landscape based on that. It doesn't look as though the widths and heights will rule out desktop browsers (unless I'm missing something).

https://mislav.net/2010/04/targeted-css/

Answer 1

 media="only screen and (device-width: 768px)"

Thanks to Mislav Marohnić for the answer!

This works for iPad in either orientation and seems to exclude desktop Safari.

When I was testing (min-device-width: 768px) and (max-device-width: 1024px) I could see Safari 4 using the styles or ignoring them as I widened or narrowed the window. When testing (device-width: 768px) I tried to make the desktop Safari browser exactly 786px wide, but I never got it to see the styles.

Answer 2

I use PHP to do that. I isolate the plateform from the USER_AGENT string. Then I only have to use a if($plateform == 'iPad') {.....} It's that easy!

Answer 3

This is a quite simlifying demonstration: http://css-tricks.com/snippets/css/ipad-specific-css/