关于 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，它提供有关设备细节的信息，例如操作系统及其版本、浏览器和浏览器版本、屏幕尺寸、当前方向以及对特定功能的支持，如触摸事件支持， 方向变化等等。