Chrome移动模拟模式中错误的(maxTouchPoints)和(文档中的‘ontouchstart’)

Question

我使用如下的触摸屏设备检测：

if (window.navigator.maxTouchPoints || 'ontouchstart' in document)  
    // handle as mobile device
else
    // handle as desktop

当我在Chrome移动仿真中更改屏幕时，maxTouchPoints和'ontouchstart' in document的结果都是不可预测的。

对于同一个仿真屏幕，它可以返回等于0或1的maxTouchPoints，以及等于true或false的'ontouchstart' in document。

所以，我真的不能在这张支票上。

你能推荐一个解决这个问题的方法吗？

Answer 1

我创建了以下函数来检查触摸点是否被实际启用(例如，使用设备/仿真器上的“启用触摸点按钮”)：

function isTouchEventsEnabled() {
    // Bug in FireFox+Windows 10, navigator.maxTouchPoints is incorrect when script is running inside frame.
    // TBD: report to bugzilla.
    const navigator = (window.top || window).navigator;
    const maxTouchPoints = Number.isFinite(navigator.maxTouchPoints) ? navigator.maxTouchPoints : navigator.msMaxTouchPoints;
    if (Number.isFinite(maxTouchPoints)) {
        // Windows 10 system reports that it supports touch, even though it acutally doesn't (ignore msMaxTouchPoints === 256).
        return maxTouchPoints > 0 && maxTouchPoints !== 256;
    }
    return 'ontouchstart' in window;
}

Answer 2

这个怎么样？

function isTouchscreen() {
  return ("ontouchstart" in window) || (navigator.maxTouchPoints > 0) ? true : false;
}

if (isTouchscreen()) {
  console.log('IS touchscreen');}
else {
  console.log('IS NOT touchscreen');
}

参考：https://developer.mozilla.org/en-US/docs/Web/API/Navigator/maxTouchPoints