3

Referring to Chrome's ability to emulate device resolution and touch events: https://developer.chrome.com/devtools/docs/device-mode

The actual issue:

'ontouchstart' in document.documentElement

In device emulation mode returns false (when it is in fact capable of performing a touch event). Thus, I need an exception for the device mode emulation.

Gajus
  • 69,002
  • 70
  • 275
  • 438
  • 1
    [This](https://frontify.com/blog/how-to-emulate-touch-events-in-chrome/) could be usefull for you. – Tim Vermaelen Feb 16 '15 at 15:33
  • I know how to emulate touch events. I am asking how to detect an environment thats emulating touch events. – Gajus Feb 16 '15 at 15:35
  • Maybe you need to read it again ... as it states that [FireFox OS](https://hacks.mozilla.org/2013/07/firefox-os-simulator-4-0-released/) came up with a tool to do just that. It's not in your favourite browser, so perhaps that's not possible. – Tim Vermaelen Feb 16 '15 at 15:38
  • Question is about Chrome's device emulation. – Gajus Feb 16 '15 at 15:39

3 Answers3

6

You need to check for ontouchstart in window. Not document.documentElement.

Touch Events are to be detected with:

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

I should mention that I am not including the window.DocumentTouch method used by Modernizr. It's only for Firefox < 25 and Mozilla dropped the Touch Metro UI on Windows. So I don't see any plausible or relevant browser usage to really justify it any longer. And while TouchEvent in window isn't required, I think it's more future proof and technically correct to check the API's presence too.

For more details on Touch Events detection see the latest Modernizr Touch Event Feature Detect with link and references in comments.

hexalys
  • 5,177
  • 3
  • 31
  • 56
2

I ended with:

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

Chrome adds Mobile to userAgent in device emulation mode, for example "Mozilla/5.0 (iPhone; CPU iPhone OS 10_3 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) CriOS/56.0.2924.75 Mobile/14E5239e Safari/602.1"

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

isn’t providing correct state in real time when you turning on/off device mode unfortunately

Lex
  • 461
  • 3
  • 9
1

As Alex mentioned the correct state in real time when turning on/off device is not effected with hexalys answer.

so what I did is like so

  • Checking if the browser is lying about its identity - fingerprintjs has a method getHasLiedBrowser that uses browser features to detect browsers by availability of global functions for example.
  • Checking if touch device - using hexalys answer does not give indication in real time toggle between device emulation like Alex mentioned so I used this code from other SO answer here https://stackoverflow.com/a/51774045/14238203
  • Checking that navigator.maxTouchPoints === 1 this indicates we are in simulation mode (I am not 100% certain, this needs to be checked in Desktop/Laptops with touch screens)
  • Using Alex answer for specific edge case, Chrome in emulation of Android devices does not lie, it is still chrome :) So we use Alex answer to cover this case.
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)
    );
};

This solution works in real time toggle of mobile emulation on Chrome per my tests with Chrome, Edge and Brave latest versions.

Arye Shalev
  • 61
  • 5