如何一般地测试是否支持媒体查询

How to generically test if mediaqueries are supported?

本文关键字:支持 媒体 查询 是否 测试 何一般      更新时间:2023-09-26

可能听起来很奇怪,但我正在寻找一种简单的方法来测试浏览器是否支持any mediaqueries

我知道有respondjs,它带有一个窗口。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在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被支持,那么没有通用测试。

你可以在modernizr

中选择这个选项http://modernizr.com/download/