我知道没有明确的 CSS 媒体查询方法来检测触摸设备，并且我知道可以运行 Modernizr 脚本来检查触摸功能。
但是，我想知道是否有任何理由不使用媒体查询(方向:纵向)和(方向:横向)来帮助隔离触摸设备。我的假设是只有触摸设备才有这种功能。
是否有使用方向的台式机/笔记本电脑/键盘设备？
最佳答案
是的，有理由不这样做:方向与设备是否使用触摸无关，它使用视口(viewport)宽度和高度来确定方向。当视口(viewport)宽度大于高度时，将应用(方向:横向)；当视口(viewport)高度大于宽度时，将应用(方向:纵向)。因此，实际上，任何完全支持媒体查询的设备上的任何浏览器都将利用方向。
查看 jsfiddle形成这个stackoverflow answer当您调整浏览器窗口大小时，您将看到方向媒体查询生效。
作为附录，您应该注意 the modernizr docs 中的这句话:
The Modernizr.touch test only indicates if the browser supports touch events, which does not necessarily reflect a touchscreen device. For example, Palm Pre / WebOS (touch) phones do not support touch events and thus fail this test. Additionally, Chrome (desktop) used to lie about its support on this, but that has since been rectified. Modernizr also tests for Multitouch Support via a media query, which is how Firefox 4 exposes that for Windows 7 tablets.
话虽如此，它可能仍然适合您正在做的事情。这取决于你
关于css - 媒体查询: Touch Only，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23619438/