您的搜索结果

    测试媒体查询

    DOM有这样一种特性,可以通过程序来获得媒体查询的结果。这是通过 MediaQueryList 接口和它的方法来实现的。一旦你创建了MediaQueryList 对象, 你就可以通过它来检查查询结果,或者,你也可以一些设置,来实现当查询结果变化时,自动接收到通知。

    注意: 本文讨论的这种特性目前还处于草案状态,最终的实现可能跟这里的讨论有区别。

    创建媒体查询列表

    在获取查询结果前,你先要创建 MediaQueryList 对象来存放媒体查询。为了实现这个目的,需要使用window.matchMedia 方法。

    举个例子,比如你想设置一个查询列表用来判定设备屏幕处于横屏还是竖屏,那你可以像下面这样编码:

    var mql = window.matchMedia("(orientation: portrait)");
    

    检查查询结果

    一旦你创建了一个媒体查询列表,你就可以通过检查相应查询的 matches 属性来获取查询结果,上述属性会直接返回查询结果:

    if (mql.matches) {
      /* The device is currently in portrait orientation */
    } else {
      /* The device is currently in landscape orientation */
    }
    

    接收查询提醒

    如果你需要持续观察查询结果值的变化情况,那么就很有必要来注册一个监听器,这比手动检查查询结果要有效很多。 如何实现呢?你需要在MediaQueryList对象上使用 addListener() 方法 ,这样就通过实现MediaQueryListListener 接口来指定了一个监听器。

    var mql = window.matchMedia("(orientation: portrait)");
    mql.addListener(handleOrientationChange);
    handleOrientationChange(mql); 
    

    上述代码创建了一个屏幕方向的测试查询列表mql,并且添加了事件监听。需要注意的是,当我们添加监听后,我们其实直接调用了一次监听。这会让我们的监听器以目前设备的屏幕方向来初始化判定代码。换句话说,如果我们代码中设定设备处于竖屏模式,而实际上它在启动时处于横屏模式,那么我们在后面的判定就会出现矛盾。

    然后,我们可以在handleOrientationChange() 方法中来查看查询结果,并且可以设置屏幕方向变化后的逻辑处理代码:

    function handleOrientationChange(mql) {
      if (mql.matches) {
        /* The device is currently in portrait orientation */
      } else {
        /* The device is currently in landscape orientation */
      }
    }
    

    终止查询通知

    如果你不需要再接收媒体查询值变化的相关通知,那你可以方便的通过在MediaQueryList上调用removeListener() 方法来移除监听:

    mql.removeListener(handleOrientationChange);
    

    浏览器兼容性

    特性 Chrome Firefox (Gecko) Internet Explorer Opera Safari
    最低支持版本 9 6.0 (6.0) 10 ? 5.1
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    最低支持版本 ? ? ? ? 5

    另见

    文档标签和贡献者

    对本页有贡献的人: reygreen1, Wenbin, Chajn
    最后编辑者: Chajn,