如何使用媒体查询为 iPad 定位 CSS 但排除 Safari 4 桌面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2678297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to target CSS for iPad but exclude Safari 4 desktop using a media query?
提问by Miriam Salzer
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.
我正在尝试使用媒体规则将 CSS 仅定位到 iPad。我想排除 iPhone/iPod 和桌面浏览器。如果可能，我还想排除其他移动设备。
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:
但刚刚发现桌面 Safari 4 读取它。我尝试过使用“481px”而不是“768px”的变体，以及另一个添加方向的变体：
<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.)
但没有运气。（稍后我们将嗅探 iPad 的用户代理字符串，但目前该解决方案不起作用。）
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).
更新：似乎桌面 Safari 目前使用屏幕的宽度和高度，并基于此为自己提供纵向或横向的方向。看起来宽度和高度不会排除桌面浏览器（除非我遗漏了一些东西）。
回答by Miriam Salzer
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.
这适用于任一方向的 iPad，似乎不包括桌面 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.
当我测试时，(min-device-width: 768px) and (max-device-width: 1024px)我可以看到 Safari 4 使用这些样式或在我扩大或缩小窗口时忽略它们。在测试时，(device-width: 768px)我试图使桌面 Safari 浏览器的宽度恰好为 786 像素，但我从未让它看到样式。
回答by Maze
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!
我使用 PHP 来做到这一点。我将平台与 USER_AGENT 字符串隔离开来。那我只需要用一个就if($plateform == 'iPad') {.....}这么简单！
回答by Katzenfresser
This is a quite simlifying demonstration: http://css-tricks.com/snippets/css/ipad-specific-css/
这是一个非常简单的演示：http://css-tricks.com/snippets/css/ipad-specific-css/
