在 Edge 中检测对 @-ms-viewport 规则的支持

Question

现在 Microsoft 决定将 Edge 中的 @-ms-viewport 规则移到 about:config 标志后面，使用 javascript（不是 jquery）如何确定用户是否启用了该标志（或正在使用旧版本仍然支持它的 Edge）？

关于撤销规则的话题在这里https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7970618/

Answer 1

也许是这样的？请参阅代码中的 cmets。

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;
}

我无法在 Edge 中测试 sn-p，因为我没有使用 Windows。但是，如果视口宽度为 200px，则该函数返回 true，否则返回 false。

（如果您的目标是 ES5，您可以将 let 替换为 var）