Detect when the device emulation mode is turned on or off in Chrome

Question

Chrome DevTools has the option to use the device emulation mode.

I know there's a way to test whether the mode is on or not. But I'd like to know when it's being activated or deactivated, on click.

Are there any events I could listen to, fired by the browser, that indicate the mode was turned on or off?

Answer 1

I ended up doing this:

$(window).on('orientationchange', function(e) {

    if (e.tagret && e.target.devicePixelRatio > 1) {
        // Emulation mode activated
    } else {
       // Emulation mode deactivated
    }

});

Works for Google Chrome (my version: 58.0). Is it the bulletproof way? Not sure. It's enough for my needs, though.

orientationchange docs here.

Answer 2

My solution:

$(window).on('orientationchange', function(e) {
    setTimeout(function() {
        var emulationModeActivated = window.navigator.userAgent.indexOf('Mobile') !== -1;
    }, 0);
});

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"

e.target.devicePixelRatio isn't usable on Mac with Retina Display as value is always > 1