一个可靠的媒体查询，只检测 iPad（或最好的 1024x768 移动设备）

Posted 2023-03-06

【中文标题】一个可靠的媒体查询，只检测 iPad（或最好的 1024x768 移动设备）

【英文标题】：A reliable media query to detect only iPad (or at best 1024x768 mobile devices)

【发布时间】：2012-03-01 18:27:37

【问题描述】：

我已经阅读了几乎所有与此问题相关的 *** 问题，但没有任何效果符合我的预期。

我被要求通过媒体查询检测仅 iPad 设备（或最多 ~1024x768 移动设备）。我尝试使用

@media screen
       and (min-device-width: 768px)
       and (max-device-width: 1024px) 
   ...

但是当分辨率设置为 1024x768（但不是 firefox）时，此媒体查询也匹配笔记本电脑和台式机 Win32/MacOS 上的 Chrome（我猜是 Safari）。我尝试了定义orientation:portrait 和orientation:landscape 的媒体查询，但没有运气。它也在桌面 webkit-browser 上被识别。

您可以尝试this fiddle 来测试问题。

搜索后我来到this interesting article，其中声明

我认为 Safari（以及我测试过的其他 WebKit 浏览器）没有遵循规范，而 Firefox 和 Opera 则遵循规范。

“宽度”媒体特征描述了输出设备目标显示区域的宽度。对于连续媒体，这是视口的宽度（如 CSS2 第 9.1.1 节 [CSS21] 所述），包括渲染滚动条的大小（如果有）。

所以我用 1009px 尝试了这个 (fiddle) max-device-width (1024-15)

@media screen and (min-device-width: 768px) 
              and (max-device-width: 1009px) 
   ...

并且不起作用但是如果我使用此媒体查询还定义了方向 (fiddle)

@media screen and (device-width:768px) and (orientation:portrait),
       screen and (device-width:1009px) and (orientation:landscape) 
    ...

令人惊讶（对我来说）它似乎可以正常工作，而且它似乎只匹配 safari/iPad。

问：这个媒体查询对于我的需要是否足够可靠？它总是在 iPad/iPad2 上工作吗？或者我必须期待一些边缘情况和与其他设备分辨率的意外匹配？ 在这种情况下，您能否提出更高效、更可靠的媒体查询？

谢谢你:) （抱歉冗长）

【问题讨论】：

具体目的是什么？例如。下个月左右会有 iPad 3，屏幕分辨率不同。是的 - 我希望其他平板电脑也能匹配。

确切目的主要是匹配ipad/ipad2。我知道这在 RWD 方面没有多大意义（移动设备和台式机 1024x768 有什么区别？恕我直言，它们应该被认为是同一件事）但是既然要求我在纯 css 中做这样的事情，我想实现这一点 - 当然如果可能的话。

您是否想让网站对 iPad 友好？如果是这种情况，您最好让网站对所有设备都“触摸”友好，在这种情况下，您可以使用诸如modernizr之类的库来嗅探设备是否支持触摸事件（这样您就可以切换渲染哪个css文件javascript)

【参考方案1】：

也尝试检查用户代理。这必须在 CSS 之外的其他东西中完成，但会解决您的问题。这样您就可以查看它是否是 iPad。

这样的事情注定会失败，最好是安全而不是后悔并使用有效的东西。

【参考方案2】：

修复方法不仅要匹配设备宽度，还要匹配高度。

只有完美匹配才会起作用。

请查看this 答案以获得更深入的讨论。