Question

可能听起来很奇怪，但我正在寻找一种简单的方法来测试浏览器是否支持any媒体查询。

我知道有respondjs，它附带window.matchMedia polyfill，但即使使用它，我仍然需要查询特定的查询，如：

  window.matchMedia("all and (min-width: 400px"));

返回obj.matches = true/false。

我正在寻找的是一种通用的测试方法，“如果支持mediaQueries”，是或否。

我目前正在使用：

  window.matchMedia("screen and (orienation:landscape),
                      screen and (orientation:portrait)");

但我真的不喜欢这种测试方式。

我也尝试过：

  window.matchMedia("all");

但是当使用true polyfill时，这（当然）会在IE8中返回matchMedia。此外，我无法测试matchMedia本身，因为我会错过许多支持媒体查询的浏览器，但不会错过window.matchMedia（caniuse）。

问题：
有没有一种简单的方法来测试媒体查询支持？如果可能的话，我根本不想使用window.matchMedia来做到这一点。

修改
我还检查了Modernizr，它还测试了特定的mediaQuery条件（ mq ）：

testMediaQuery = function( mq ) {

  var matchMedia = window.matchMedia || window.msMatchMedia;
  if ( matchMedia ) {
    return matchMedia(mq).matches;
  }

  var bool;

  injectElementWithStyles('@media ' + mq + ' { #' + mod + ' { position: absolute; } }', function( node ) {
    bool = (window.getComputedStyle ?
              getComputedStyle(node, null) :
              node.currentStyle)['position'] == 'absolute';
  });

  return bool;

 },

因此，如果支持mediaQueries，则不进行通用测试。

Answer 1

你可以在modernizr中选择这个选项

http://modernizr.com/download/

如何基因测试是否支持媒体查询？

1 个答案: