3

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?

lesssugar
  • 15,486
  • 18
  • 65
  • 115
  • 1
    A robust solution would probably want to monitor resize events, a changing devicePixelRatio, a changing userAgent, the availability of touch mode detection, and orientationchange and make a decision based on all of them. These signals can mean other things. – Josh Lee Jan 26 '18 at 12:36

2 Answers2

2

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.

lesssugar
  • 15,486
  • 18
  • 65
  • 115
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

Lex
  • 461
  • 3
  • 9