可靠的媒体查询，仅检测iPad（或最多检测1024x768移动设备）

我已经阅读了几乎所有与此问题相关的stackoverflow问题，但没有一个像我预期的那样有效

我被要求通过媒体查询只检测iPad设备（或者最多检测1024x768移动设备）。我试着用

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

但当分辨率设置为1024x768（但不是firefox）时，这个媒体查询也与笔记本电脑和桌面Win32/MacOS上的Chrome（我猜还有Safari）相匹配。我尝试了这个定义

方向：纵向

和

方向：横向

的媒体查询，但没有成功。在桌面webkit浏览器上也可以识别它

您可以尝试测试该问题

经过搜索，我找到了一个

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

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

所以我用1009px作为

max device width

（1024-15）尝试了这个（）

而且不起作用
但是如果我使用这个媒体查询来定义方向（）

令人惊讶的是（对我来说）它似乎工作正常，而且似乎只与safari/iPad相匹配

Q：对于我的需要，此媒体查询是否足够可靠？它在iPad/iPad2中总是工作吗？或者我不得不期望一些边缘情况和与其他设备分辨率的意外匹配？ 在这种情况下，您能否建议一种更有效、更可靠的媒体查询

谢谢：）

---

（很抱歉这么冗长）

请尝试检查用户代理。这将必须在CSS以外的其他方式中完成，但将解决您的问题。这样你就可以知道它是不是iPad了

---

像这样的东西肯定会坏掉，与其说抱歉，不如说安全一点，使用一些有效的东西。

解决办法不仅是匹配设备的宽度，还要匹配设备的高度

它只有在完美匹配的情况下才能工作

---

查看答案，以便进行更深入的讨论。

确切的目的是什么？例如，下个月左右将推出一款具有不同屏幕分辨率的iPad3。是的，我希望其他平板电脑也能与之相匹配。确切的目的主要是与ipad/ipad2相匹配。我知道这在RWD方面没有多大意义（移动设备和桌面设备1024x768之间有什么区别？IMHO认为它们应该是同一件事），但既然让我用纯css来做这件事，我想实现这一点——当然，如果可能的话。你是否在尝试为iPad创建一个友好的网站？如果是这样的话，您最好让站点对所有设备都“touch”友好，在这种情况下，您可以使用诸如modernizer之类的库来嗅探设备是否支持触摸事件（因此您可以切换哪个css文件以javascript呈现）

@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) {
    ...
}