当前位置: 首页 > Web前端 > HTML

SAPUI5sap.ui.Device.media使用介绍

时间:2023-04-02 18:32:26 HTML

sap.ui.Device.media是属于sap/ui/Device的命名空间。该接口属于屏幕宽度变化的事件接口。此API基于媒体查询,但如果使用的浏览器本身不支持媒体查询,则可以使用该API。在这种情况下,媒体查询的行为是通过该API模拟的。有几个可用的预定义范围集,每个范围集定义一组屏幕宽度间隔(从小到大)。只要屏幕宽度发生变化并且当前屏幕宽度不同于变化前的时间间隔,就会调用范围集的已注册事件处理程序。如果需要,还可以定义一组自定义间隔。下面的例子展示了一个典型的用例:case"Tablet"://执行中等屏幕中断所需的操作;case"Desktop"://执行大屏幕所需的操作}}//注册事件处理程序以更改屏幕尺寸sap.ui.Device.media.attachHandler(sizeChanged,null,sap.ui.Device.media.RANGESETS.SAP_STANDARD);//根据当前sizeChanged做一些初始化工作sizeChanged(sap.ui.Device.media.getCurrentRange(sap.ui.Device.media.RANGESETS.SAP_STANDARD));详见示例:上面代码中,第一个a是我的浏览器在全屏环境下打印的结果,返回的宽度对应的设备是Desktop,因为宽度是1024px;浏览器窗口的宽度缩小了,如下图:因此,第二个a打印为Tablet,因为宽度已经缩小到600px。一步步调试了解Device.media.getCurrentRange的实现原理:Device.js中的实现:获取所有查询:window.matchMedia是native实现吗?这次返回true:只要传入一个aa即可:注意区别:window.matchMedia("alland(min-width:2024px)");最后的返回值:注意,我是直接在SAPUI5源码上设置断点,然后从Chrome开发者工具控制台发起调用,触发断点,可以看到这个VM标识: