SAP UI5 设备类型检测 Device API 的工作原理
为什么 SAP UI5 应用初始化时,要调用 SAP UI5 设备检测 API,即 sap.ui.Device
来检测运行当前 SAP UI5 应用的设备类型?
可以查看我这篇文章:SAP UI5 应用开发教程之三十四 - SAP UI5 应用基于设备类型的页面适配功能(Device Adaptation)。
本文介绍该设备检测 API 本身的工作原理。
Device API 所在的 Device.js 文件被加载后,立即执行 setOS
方法:
从 OS
结构变量可以看出,SAP UI5 支持下列几种操作系统的检测:
- Android
- iOS
- Linux
- mac
- Windows
我们通过浏览器的 userAgent
来判断操作系统类型:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36
使用正则表达式匹配,如果发现有 Android 字符串,则说明当前的 SAP UI5 应用,运行在 Android 移动设备上。
如果没有检测到,进入 getDesktopOS
分支。
我用的是 Windows10 操作系统,platform 字段值为 Win32
:
成功解析出操作系统的版本号为 10:
给 Device API 里的 device 对象设置对应的 os 值:
然后执行 setBrowser
设置浏览器对应的 flag:
基于 webkit
和 mozilla
的浏览器类型检测,使用下面的正则表达式完成:
var rwebkit = /(webkit)[ \/]([\w.]+)/;
var rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/;
最后仍然通过正则表达式结合 userAgent
,检测出我在 Windows10 操作系统上使用的浏览器类型为 Chrome
:
根据这个 StackOverflow 帖子 提到的如何检测 Chrome 是否使用了 blink
渲染引擎的实现:
给 Device 全局变量的 support 字段赋值:
进入设备类型检测:
首先检测是否是 tablet
:
var bTabletDetected = !!isTablet(customUA);
从这里能够看出,SAP UI5 判断一个设备是 tablet
的逻辑为,如果该设备的操作系统是 windows 或者 mac 或者 Linux,那么如果它支持 touch
操作,就被看成是 tablet
:
从下图代码,我们终于找到了 SAP UI5 判定当前 device 是 phone
的逻辑:如果设备支持 touch
操作并且不是 tablet
,那么一定是 phone
.
而检测一台设备是否支持 touch 的逻辑:
var detectTouch = function () {
return !!(('ontouchstart' in window)
|| (window.navigator.maxTouchPoints > 0)
|| (window.DocumentTouch && document instanceof window.DocumentTouch)
|| (window.TouchEvent && Device.browser.firefox));
};
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- bapi sap 创建物料_bapi 物料主数据创建 ‘BAPI_MATERIAL_SAVEDATA’「建议收藏」
- SAP UI5 sap.ui.Device.media.RANGESETS 的使用介绍
- SAP UI5 sap.ui.Device.media 公有方法介绍
- 戴尔大中华区总裁「黄陈宏」跳槽,被任命为 SAP 大中华区总裁
- 使用 Excel cdata addin 连接 SAP ABAP 系统时遇到错误消息 Unable to connect to SAP system
- 如何将SAP归档数据合并到数据湖中
- SAP UI5 应用如何加载自定义 Theme
- 澄清一些对 SAP UI5 响应式表格 sap.m.Table 的常见理解误区试读版
- 34. 如何使用 Postman 发送 SAP OData Batch 请求到 ABAP 后台服务器
- 本周参加两个SAP项目面试后的感想
- 深入比较:SAP vs Oracle(sap和oracle)
- sap透明表、结构、簇介绍以及查找表方法详解编程语言
- sap快捷搜索菜单栏详解编程语言
- SAP寄售业务流程详解编程语言
- SAP 《MM学习指南》操作记录—- 计划协议及交货计划详解编程语言
- SAP中关于物料主数据里物料类型的修改详解编程语言
- 深度比较:SAP vs Oracle(sap与oracle比较)
- 系统Oracle公司收购SAP系统开启新的商业时代(Oracle公司sap)
- 缓存使用SAP创建Redis缓存,实现高效稳定加速(sap如何创建redis)
- Oracle和SAP教程一步一步学习(oracle sap教程)
- Oracle 与 SAP深度对比分析(oracle sap对比)