為什麼 SAP UI5 應用初始化時，要呼叫 SAP UI5 裝置檢測 API，即 `sap.ui.Device` 來檢測執行當前 SAP UI5 應用的裝置型別？

可以檢視我這篇文章：[SAP UI5 應用開發教程之三十四 - SAP UI5 應用基於裝置型別的頁面適配功能(Device Adaptation)](https://jerry.blog.csdn.net/article/details/122799506)。

本文介紹該裝置檢測 API 本身的工作原理。

Device API 所在的 Device.js 檔案被載入後，立即執行 `setOS` 方法：

![](https://img-blog.csdnimg.cn/img_convert/efea270a75759b3d2e28fdc90d3b1219.png)

從 `OS` 結構變數可以看出，SAP UI5 支援下列幾種作業系統的檢測：

- Android
- iOS
- Linux
- mac
- Windows

![](https://img-blog.csdnimg.cn/img_convert/be9315272c52f84611d82f38809f5879.png)

我們透過瀏覽器的 `userAgent` 來判斷作業系統型別：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36

![](https://img-blog.csdnimg.cn/img_convert/395211b808f1a64db52bfd9de95fd120.png)

使用正規表示式匹配，如果發現有 Android 字串，則說明當前的 SAP UI5 應用，執行在 Android 移動裝置上。

![](https://img-blog.csdnimg.cn/img_convert/5db5ad5b6637c19ee07eb303845ba478.png)

如果沒有檢測到，進入 `getDesktopOS` 分支。

我用的是 Windows10 作業系統，platform 欄位值為 `Win32`:

![](https://img-blog.csdnimg.cn/img_convert/4821b512b42196473c2a32cc9e9e5748.png)

成功解析出作業系統的版本號為 10：
![](https://img-blog.csdnimg.cn/img_convert/046e564717b29c38bc331042cfeae6ff.png)

給 Device API 裡的 device 物件設定對應的 os 值：

![](https://img-blog.csdnimg.cn/img_convert/4eb66e1fcf7c70a64156952ad897c697.png)

![](https://img-blog.csdnimg.cn/img_convert/d7ebff27a309549b07dc7f6094af8762.png)

然後執行 `setBrowser` 設定瀏覽器對應的 flag：
![](https://img-blog.csdnimg.cn/img_convert/3baa7d8f12ee21c93fc30bf455d60202.png)

基於 `webkit` 和 `mozilla` 的瀏覽器型別檢測，使用下面的正規表示式完成：

```javascript
var rwebkit = /(webkit)[ \/]([\w.]+)/;
var rmozilla = /(mozilla)(?:.*? rv:([\w.]+))?/;
```

![](https://img-blog.csdnimg.cn/img_convert/4bfbbdcdad9e7ed93126f0d84c6af808.png)

![](https://img-blog.csdnimg.cn/img_convert/f624ef266786ccf3e1c6b38262ea7d48.png)

最後仍然透過正規表示式結合 `userAgent`，檢測出我在 Windows10 作業系統上使用的瀏覽器型別為 `Chrome`：

![](https://img-blog.csdnimg.cn/img_convert/a386910ae6d8bb37322c3c653ca81998.png)

根據這個 StackOverflow [帖子](https://stackoverflow.com/questions/20655470/how-to-detect-blink-in-chrome) 提到的如何檢測 Chrome 是否使用了 `blink` 渲染引擎的實現：

![](https://img-blog.csdnimg.cn/img_convert/e5e50186e1562e8e990edec9fe1cf66e.png)

給 Device 全域性變數的 support 欄位賦值：
![](https://img-blog.csdnimg.cn/img_convert/bbbf0d3e41274a870728ce6f249e9ab4.png)

進入裝置型別檢測：

![](https://img-blog.csdnimg.cn/img_convert/42ad3df2d3939a064dd5b3a90e1c9ca8.png)

首先檢測是否是 `tablet`：

```javascript
var bTabletDetected = !!isTablet(customUA);
```

從這裡能夠看出，SAP UI5 判斷一個裝置是 `tablet` 的邏輯為，如果該裝置的作業系統是 windows 或者 mac 或者 Linux，那麼如果它支援 `touch` 操作，就被看成是 `tablet`：

![](https://img-blog.csdnimg.cn/img_convert/880bc4000a6056b0ed69fdcef1b114c4.png)

從下圖程式碼，我們終於找到了 SAP UI5 判定當前 device 是 `phone` 的邏輯：如果裝置支援 `touch` 操作並且不是 `tablet`，那麼一定是 `phone`.

![](https://img-blog.csdnimg.cn/img_convert/9de06d44982db69a9265720a6419dfe2.png)

而檢測一臺裝置是否支援 touch 的邏輯：

![](https://img-blog.csdnimg.cn/img_convert/3abfd66a7c9c62e02b4204496bcf3444.png)

```javascript
var detectTouch = function () {
		return !!(('ontouchstart' in window)
			|| (window.navigator.maxTouchPoints > 0)
			|| (window.DocumentTouch && document instanceof window.DocumentTouch)
			|| (window.TouchEvent && Device.browser.firefox));
	};
```

更多Jerry的原創文章，盡在："汪子熙":
![](https://img-blog.csdnimg.cn/img_convert/a315a94c7a486da281647bf905e5d6c3.png)

SAP UI5 裝置型別檢測 Device API 的工作原理

相關文章