2

Now that Microsoft has decided to move the @-ms-viewport rule in Edge behind an about:config flag, using javascript (not jquery) how do you determine if the user has that flag enabled (or is using an older version of Edge where it was still supported)?

Thread about the withdrawal of the rule here https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7970618/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
martin
  • 393
  • 1
  • 6
  • 21
  • 1
    Christ, the sense of entitlement some people have is astounding. (Referring to the good folks in that thread, not you.) – BoltClock Mar 31 '17 at 11:17

1 Answers1

0

Maybe something like this? Please see comments in code.

function testSupportMsViewport() {
  let result = false;
  let s = document.createElement('style');
  let test = document.createElement('div');

  // create style rule to make viewport 200px in width
  // if @-ms-viewport is interpreted
  s.innerHTML = '@-ms-viewport { width: 200px; }';
  // hide any overflow hence we do not need to take scrollbars into account
  s.innerHTML += '* { overflow-y: hidden; }';
  // use fixed position, block box sizing and no paddings/margins/borders
  // together with a width of 1% (which is 2px when the viewport is 200px)
  s.innerHTML += '.foo { position: fixed; display: block; padding: 0; border: 0; margin: 0; width: 1%; }';

  test.classList += 'foo';

  // append the style element and the test div to the html element
  // applying the test styles to the div
  // note that we're not appending it to body since there may be
  // styles applied which could disturb calculations
  document.documentElement.appendChild(s);
  document.documentElement.appendChild(test);

  // check width of test div. If the browser interprets the rule,
  // it should be 2 (2px)
  // obviously, this yields a false-positive when the viewport really is just 200px in width. Think about using some other value or add additional checks
  if (parseFloat(window.getComputedStyle(test).width) === 2) {
    result = true;
  }

  // Remove elements since they're not needed anymore
  document.documentElement.removeChild(s);
  document.documentElement.removeChild(test);

  return result;
}

I was not able to test that snippet in Edge since I'm not using Windows. However, the function returns true if the viewport is 200px in width and false otherwise.

(If you're targeting ES5, you may replace the let by var)

SVSchmidt
  • 6,269
  • 2
  • 26
  • 37
  • hi SVSchmidt, thanks for your answer. Using className it works in IE10, 11 & Edge. But apart from IE10, I am left with some sort of (very large) viewport afterwards? I need to ascertain what this is, it might be a conflict with my own code, then I can accept the answer. Cheers Martin – martin Mar 31 '17 at 13:25
  • @martin I think if it's a problem with my snippet, the viewport should not be larger than 200px after (assuming the elements get not removed properly). What exactly are you trying to do? – SVSchmidt Mar 31 '17 at 13:52
  • using a simple test page, I can confirm that in IE11 (not 10) and old Edge, the viewport persists, the only way I could make it work was to collect the screen.width first and then set another viewport equivalent to the screen.width afterwards (and not delete the 'style' element). Looking in developer tools the style tag sits after

    ?

     – martin Mar 31 '17 at 15:10
  • what i'm trying to do is give tablet users and other small displays an option to click and I insert a css viewport rule, works fine but I need to exclude those versions of Edge that no longer support it and give them a message to enable the flag if they want to . – martin Mar 31 '17 at 15:16