目录

MediaQuery

接口声明

在manifest.json文件的 features属性中增加如下配置。

{"name": "system.mediaquery"}

导入模块

在调用接口页面的<script>部分增加如下配置。

import mediaquery from '@system.mediaquery'

或

var mediaquery = require("@system.mediaquery")

使用限制

限制条件

说明

适用终端

手机、平板、智慧屏

适用区域

全球

接口定义

接口

描述

mediaquery.matchMedia(condition)

创建一个MediaQueryList对象。

MediaQueryList.addListener(OBJECT)

向MediaQueryList添加一个监听函数。

MediaQueryList.removeListener(OBJECT)

移除MediaQueryList中的监听函数。

mediaquery.getAccessType()

获取当前的接入媒体类型accessType值。

[h2]mediaquery.matchMedia(condition)

描述

创建一个MediaQueryList对象。

OBJECT参数

参数

类型

是否必填

说明

condition

string

是

匹配条件。

示例代码

var mql = mediaquery.matchMedia('(max-width: 600)');

MediaQueryList属性

属性

类型

说明

matches

boolean

如果匹配当前查询条件返回true，否则返回false。只读。

media

string

代表一个序列化的媒体查询条件。只读。

onchange

function

如果设置了该函数，matches状态变化会触发该函数执行。

[h2]MediaQueryList.addListener(OBJECT)

描述

向MediaQueryList添加一个监听函数。

OBJECT参数

参数

类型

是否必填

说明

callback

function

是

匹配条件发生变化，响应函数。

示例代码

var mql = mediaquery.matchMedia('(max-width: 600)');
function screenTest(e) {
  if (e.matches) {
    // change element style
  } else {
    // change element style
  }
}
mql.addListener(screenTest);

[h2]MediaQueryList.removeListener(OBJECT)

描述

移除MediaQueryList中的监听函数。

OBJECT参数

参数

类型

是否必填

说明

callback

function

是

匹配条件发生变化，响应函数。

示例代码

mql.removeListener(screenTest);

[h2]mediaquery.getAccessType()

描述

获取当前的接入媒体类型accessType值（华为定制接口，非厂商联盟规范）。

返回值

参数

类型

说明

type

string

当前的接入媒体类型，快应用场景中默认值为“fastapp”，卡片场景中默认为“card”，也可以由接入媒体自定义，例如“hiboard”。

示例代码

var type = mediaquery.getAccessType();

版本更新说明

版本

发布日期

描述

1050

2019-09-20

第一次正式发布。