关于 SAP UI5 设备类型检测的实现原理

简介: 关于 SAP UI5 设备类型检测的实现原理

SAP UI5 命名空间 sap.ui.Device.system 下包含了一系列标志位,这些标志位的类型为 boolean:


  • sap.ui.Device.system.combi:如果此标志设置为 true,则设备被识别为桌面系统和平板电脑的组合。

此外,一个 CSS 类 sap-combi 被添加到文档根元素中。


注意:仅当同时检测到桌面设备和移动设备时,此属性才设置为 true。


  • sap.ui.Device.system.desktop:如果此标志设置为 true,则设备被识别为桌面系统。

此外,一个 CSS 类 sap-desktop 被添加到文档根元素中。


注意:默认情况下,此标志对于运行 iOS 13 或更高版本的 iPad 上的 Safari 也是如此。 最终用户可以通过在 iOS 设置中禁用“请求桌面网站 -> 所有网站”来更改此行为。


  • sap.ui.Device.system.phone:如果此标志设置为 true,则设备被识别为电话。

此外,一个 CSS 类 sap-phone 被添加到文档根元素中。


注意:如果手机请求将网页作为“桌面页面”,则可能会将除 Device.system.phone 之外的所有属性设置为 true。 在这种情况下,不可能依靠用户代理来区分平板电脑和手机。


  • sap.ui.Device.system.tablet:如果此标志设置为 true,则设备被识别为平板电脑。

此外,在文档根元素中添加了一个 CSS 类 sap-tablet。


注意:此标志也适用于在桌面设备上运行的某些浏览器。 可以使用以下逻辑来确保当前设备是平板设备:


if(sap.ui.Device.system.tablet && !sap.ui.Device.system.desktop){
  ...tablet related commands...
}

看个具体的例子:



以上 html 根元素,确实具有 sap-desktop 的 CSS 类.


但是这个类又是拿来干什么的?


sapUiMedia-Std-Tablet


设备 API ( sap.ui.Device ) 是一个 API,它提供有关设备细节的信息,例如操作系统及其版本、浏览器和浏览器版本、屏幕尺寸、当前方向以及对特定功能的支持,如触摸事件支持, 方向变化等等。



相关文章
|
5月前
|
开发者 数据处理 数据管理
SAP HANA 的不同类型
SAP HANA 的不同类型
SAP HANA 的不同类型
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
5月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
5月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
5月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
5月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
|
5月前
|
XML 前端开发 JavaScript
深入介绍 UI5 框架里 Smart Field 控件的工作原理
深入介绍 UI5 框架里 Smart Field 控件的工作原理
|
5月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天