Question

我已经阅读了几乎所有与此问题相关的stackoverflow问题，但没有任何效果如我所料。

有人要求我通过媒体查询检测仅限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]所述），包括渲染滚动条的大小（如果有的话）。

所以我尝试了这个（fiddle），1009px为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吗？或者我不得不期待一些边缘情况和与其他设备分辨率的意外匹配？在这种情况下，您可以建议更有效和可靠的媒体查询吗？

谢谢:) （并为遗憾而烦恼）

Answer 1

尝试检查用户代理。这将不仅仅是CSS，而是解决您的问题。通过这种方式，您可以看到它是否是iPad。

这样的事情必然会破裂，更安全而不是抱歉并使用有效的东西。

Answer 2

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

只有完美匹配才能正常工作。

请查看this答案，进行更深入的讨论。

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

2 个答案: