开发者

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

开发者 https://www.devze.com 2022-12-27 08:48 出处:网络
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 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 开发者_如何学JAVAportrait 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/


 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.


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!


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

0

精彩评论

暂无评论...
验证码 换一张
取 消