一个可靠的媒体查询,只检测iPad(或最好的1024x768移动设备)

Question

我已经阅读了几乎所有与此问题相关的stackoverflow问题,但没有任何方法可以正常工作.

有人要求我通过媒体查询只检测iPad设备(或最好是〜1024x768 移动设备).我试着用

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

但是当分辨率设置为1024x768(但不是firefox)时,这个媒体查询还会在笔记本电脑和桌面Win32/MacOS上与Chrome(和我猜测)相匹配.我试过这个媒体查询定义orientation:portrait, orientation:landscape但没有运气.它也在桌面webkit浏览器上得到认可.

你可以尝试这个小提琴来测试这个问题.

在搜索之后,我来到这篇有趣的文章中

我认为Safari(以及我测试过的其他WebKit浏览器)并没有遵循规范,而Firefox和Opera则是如此.

"宽度"媒体功能描述了输出设备的目标显示区域的宽度.对于连续媒体,这是视口的宽度(如CSS2,第9.1.1节[CSS21]所述),包括渲染滚动条的大小(如果有的话).

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

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

并且不起作用,
但如果我使用此媒体查询也定义方向(小提琴)

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

令人惊讶的是(对我来说)它似乎正常工作,它似乎只匹配safari/iPad.

问:这个媒体查询对我的需求是否足够可靠？它总是适用于iPad/iPad2吗？或者我不得不期待一些边缘情况和与其他设备分辨率的意外匹配？在这种情况下,您可以建议更有效和可靠的媒体查询吗？

谢谢:)(对于冗长而感到遗憾)

Answer 1

也尝试检查用户代理。这必须使用 CSS 之外的其他方法来完成，但可以解决您的问题。这样你就可以知道它是否是 iPad。

像这样的东西肯定会坏掉，最好是安全而不是遗憾并使用有效的东西。