Question

参考Chrome浏览器模拟设备分辨率和触摸事件的功能：https://developer.chrome.com/devtools/docs/device-mode

实际问题：

'ontouchstart' in document.documentElement

在设备仿真模式下，返回false（当它实际上能够执行触摸事件时）。因此，我需要设备模式仿真的例外。

Answer 1

您需要在窗口中检查ontouchstart。不是document.documentElement。

通过以下方式检测触摸事件：

'TouchEvent' in window && 'ontouchstart' in window

我应该提一下，我不包括Modernizr使用的window.DocumentTouch方法。它仅适用于Firefox＆lt; 25，Mozilla在Windows上放弃了Touch Metro UI。因此，我不会看到任何合理或相关的浏览器用法，以便再次证明它的合理性。虽然TouchEvent in window不是必需的，但我认为检查API的存在还有其未来的证据和技术上的正确性。

有关触摸事件检测的详细信息，请参阅最新的Modernizr Touch Event Feature Detect，其中包含评论中的链接和参考。

Answer 2

我结束了：

window.navigator.userAgent.indexOf('Mobile') !== -1;

Chrome会在设备模拟模式下将Mobile添加到userAgent，例如＆＃34; Mozilla / 5.0（iPhone; CPU iPhone OS 10_3，如Mac OS X）AppleWebKit / 602.1.50（KHTML，如Gecko）CriOS /56.0.2924.75 移动 / 14E5239e Safari / 602.1＆＃34;

＆＃39;的TouchEvent＆＃39;在窗口＆amp;＆amp; ＆＃39; ontouchstart＆＃39;在窗口

不幸的是，当你打开/关闭设备模式时，

没有实时提供正确的状态

Answer 3

正如亚历克斯（Alex）所说的那样，打开/关闭设备时实时状态正确不受六溴环十二烷的影响。

所以我所做的就像这样

检查浏览器是否撒谎-指纹js有一种方法getHasLiedBrowser，该方法使用浏览器功能通过例如全局功能的可用性来检测浏览器。
检查触摸设备是否使用hexalys答案不能实时指示设备仿真之间的切换，就像Alex提到的那样，因此我在此处https://stackoverflow.com/a/51774045/14238203使用了来自其他SO答案的代码
检查navigator.maxTouchPoints === 1是否表明我们处于仿真模式（我不确定100％，需要在带触摸屏的台式机/笔记本电脑中进行检查）
使用Alex回答特定的边缘情况，Chrome在模拟Android设备时不会说谎，它仍然是chrome :)因此，我们使用Alex回答来解决这种情况。

const isBrowserSimulation = () => {
    // maxTouchPoints is always = 1 on simulation mode
    return (
        isTouchDevice() && // https://stackoverflow.com/a/51774045/14238203
        navigator.maxTouchPoints === 1 &&
        // Alex solution finding 'mobile' in UA covers `getHasLiedBrowser` missing emulation on android devices
        (getHasLiedBrowser() || window.navigator.userAgent.indexOf('Mobile') !== -1)
    );
};

根据我对Chrome，Edge和Brave最新版本的测试，该解决方案可在Chrome上实时切换移动设备仿真。

如何检测设备模式仿真？

3 个答案: