如何定位CSS的iPad，但排除Safari 4桌面使用媒体查询？ [英] How to target CSS for iPad but exclude Safari 4 desktop using a media query?

问题描述

我尝试使用媒体规则将CSS定位到iPad。我想排除iPhone / iPod和桌面浏览器。

我使用了

 
 code>< style type =text / cssmedia =only screen and（min-device-width：768px）and（max-device-width：1024px）> 
  

但只是发现桌面Safari 4读取它。我已尝试使用481px而不是768px的变体，另一个添加了一个方向：

 < style type =text / cssmedia =only screen and（min-device-width：481px）and（max-device-width：1024px）and（orientation：portrait）> 
  

但没有运气。 （稍后我们将嗅探iPad的用户代理字符串，但现在该解决方案将无法工作。）

谢谢！

更新：似乎桌面Safari使用屏幕的宽度和高度，并给出自己的纵向或横向的方向基于此。它看起来不像宽度和高度会排除桌面浏览器（除非我缺少某些东西）。

http://mislav.uniqpath.com/2010/04/targeted-css/

解决方案

  media =only screen and（device-width：768px）
  
 
 
这适用于任何方向的iPad并似乎排除桌面Safari。 
 
 
 
当我测试（min-device-width：768px）和（max-device-width：1024px） 
我可以看到Safari 4使用样式，或者忽略它们，因为我加宽或缩小了窗口。 
当测试（device-width：768px）我试图让桌面Safari浏览器完全786像素宽，但我从来没有看到样式。 p> 
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).

http://mislav.uniqpath.com/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.

                        
这篇关于如何定位CSS的iPad，但排除Safari 4桌面使用媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！