How to detect device mode emulation?

Question

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

The actual issue:

Answer 1

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.

Answer 2

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.

Answer 3

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