SAP UI5 sap.ui.Device.media 的使用介绍

简介: SAP UI5 sap.ui.Device.media 的使用介绍

sap.ui.Device.media 是一个命名空间,属于 sap/ui/Device.



该 API 属于屏幕宽度更改的事件 API。此 API 基于媒体查询,但如果使用的浏览器本身不支持媒体查询,也可以使用此 API。 在这种情况下,媒体查询的行为由这个 API 模拟。


有几个可用的预定义范围集,它们中的每一个都定义了一组屏幕宽度的间隔(从小到大)。 每当屏幕宽度发生变化并且当前屏幕宽度与更改前的时间间隔不同时,就会调用范围集的已注册事件处理程序。


如果需要,还可以定义一组自定义间隔。


以下示例显示了一个典型用例:


function sizeChanged(mParams) {
    switch(mParams.name) {
        case "Phone":
            // Do what is needed for a little screen
            break;
        case "Tablet":
            // Do what is needed for a medium sized screen
            break;
        case "Desktop":
            // Do what is needed for a large screen
    }
}
// Register an event handler to changes of the screen size
sap.ui.Device.media.attachHandler(sizeChanged, null, sap.ui.Device.media.RANGESETS.SAP_STANDARD);
// Do some initialization work based on the current size
sizeChanged(sap.ui.Device.media.getCurrentRange(sap.ui.Device.media.RANGESETS.SAP_STANDARD));

看个具体的例子:



上面的代码,第一个 a 是我浏览器在全屏环境下打印的结果,返回的 width 对应的 device 为 Desktop,因为 width 是 1024 px;

然后我故意用鼠标拖拽的方式,把浏览器窗口的宽度缩小,如下图所示:




因此第二个 a 打印为 Tablet,因为宽度缩小为 600 px 了。


单步调试了解 Device.media.getCurrentRange 的实现原理:




Device.js 里的实现:




得到所有的 query:



window.matchMedia 是一个 native 实现?



这次返回 true:



随便传一个 aa 进去:



注意区别:


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





最后的返回值:



注意,我是直接在 SAP UI5 源代码上设置断点,然后从 Chrome 开发者工具 Console 发起调用,触发断点,能看到这个 VM 标志:



相关文章
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
38 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
23 0
|
1月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
41 0
|
1月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
27 3
|
1月前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
25 1
什么是 SAP ABAP 里的 Subscreen
|
1月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
30 0
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
35 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
43 0
|
1月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
61 0
|
1月前
SAP UI5 应用如何实现类似百度首页一样的访问方式试读版
SAP UI5 应用如何实现类似百度首页一样的访问方式试读版
41 0