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

问题描述

我正在尝试使用媒体规则将 CSS 仅定位到 iPad.我想排除 iPhone/iPod 和桌面浏览器.如果可能，我还想排除其他移动设备.

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.

我用过

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

但刚刚发现桌面 Safari 4 可以读取它.我尝试了481px"的变体.而不是768px"另一个增加了方向:

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)">

但没有运气.(稍后我们将嗅探 iPad 的用户代理字符串，但目前该解决方案不起作用.)

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

谢谢！

更新:似乎桌面 Safari 目前使用屏幕的宽度和高度，并基于此为自己指定纵向或横向方向.看起来宽度和高度不会排除桌面浏览器(除非我遗漏了一些东西).

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/

推荐答案

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

感谢 Mislav Marohnić 的回答！

Thanks to Mislav Marohnić for the answer!

这适用于任一方向的 iPad，似乎不包括桌面 Safari.

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

当我测试 (min-device-width: 768px) 和 (max-device-width: 1024px)当我扩大或缩小窗口时，我可以看到 Safari 4 使用这些样式或忽略它们.在测试 (device-width: 768px) 时，我试图让桌面 Safari 浏览器的宽度正好为 786px，但我从来没有让它看到样式.

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.

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