媒体查询：仅触摸

Question

我知道没有明确的CSS媒体查询方法来检测触摸设备，我知道可以运行Modernizr脚本来检查触摸功能。

但是，我想知道是否有任何理由不使用媒体查询（方向：纵向）和（方向：横向）来帮助隔离触摸设备。我的假设是只有触摸设备具有这种能力。

是否有任何使用方向的台式机/笔记本电脑/键盘设备？

Answer 1

是的，有理由不：orientation与设备是否使用触摸无关，它使用视口宽度和高度来确定方向。当视口宽度高于视图时，将应用(orientation: landscape)，当视口高于视宽时，(orientation: portrait)将应用orientation。因此，实际上，任何支持媒体查询的设备上的任何浏览器都将使用{{1}}。

查看此jsfiddle的stackoverflow answer表格，您会看到当您调整浏览器窗口大小时，方向媒体查询生效。

作为附录，您应该了解the modernizr docs中的这句话：

  

Modernizr.touch测试仅指示浏览器是否支持触摸   事件，不一定反映触摸屏设备。对于   例如，Palm Pre / WebOS（触摸）手机不支持触摸事件   因此未通过此测试。此外，Chrome（桌面）曾经撒谎   关于它的支持，但此后已得到纠正。   Modernizr还通过媒体查询测试多点触控支持   Firefox 4是如何为Windows 7平板电脑公开的。

     

来自http://modernizr.com/docs/#features-misc

话虽如此，它仍然适合你正在做的事情。这取决于你

Answer 2

是的，每个设备都可以通过调整浏览器窗口大小来更改方向。不要使用它，只需使用Javascript将class添加到body标记。