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

推荐阅读更多精彩内容