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/

Solution 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.

Solution 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!

Solution 3

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

Comments

[Michael Boggess]

Thats a very clever trick. Don't forget to accept an answer. (Can you accept your own?)

[Miriam Salzer]

I found a case where the css gets ignored when the page is inside an app's webview. This might be an edge case or not, I don't know. The webview had a hard-coded size and was giving the useragent of iPhone even though it was an iPad.

[Katzenfresser]

And here you can find Apple's Safari Reference Library for HTML-Meta-Tags: link

[Americus]

I agree, checking if the browser agent contains "ipad" on the server side, then including the specified style sheet is the most accurate way to target an iPad. The solution marked as answer will affect all devices.