css - 检测设备是否为触摸屏的媒体查询

Question

什么是最安全的方法，使用媒体查询，让事情发生在不在触摸屏设备上？如果没有办法，您是否建议使用 JavaScript 解决方案，例如 !window.Touch 或 Modernizr？

Answer 1

在 CSS4 media query draft 中实际上有一个属性.

The ‘pointer’ media feature is used to query about the presence and accuracy of a pointing device such as a mouse. If a device has multiple input mechanisms, it is recommended that the UA reports the characteristics of the least capable pointing device of the primary input mechanisms. This media query takes the following values:

‘none’
- The input mechanism of the device does not include a pointing device.

‘coarse’
- The input mechanism of the device includes a pointing device of limited accuracy.

‘fine’
- The input mechanism of the device includes an accurate pointing device.

这将被这样使用:

/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
    input[type="checkbox"], input[type="radio"] {
        min-width:30px;
        min-height:40px;
        background:transparent;
    }
}

我还找到了a ticket在与此相关的 Chromium 元素中。

可以在 Quirksmode 测试浏览器兼容性.这些是我的结果(2013 年 1 月 22 日):

• Chrome/Win:有效
• Chrome/iOS:不工作
• Safari/iOS6:不工作