每個 SAP UI5 應用在初始化時，都會觸發這個方法的呼叫。

呼叫棧的上下文：
![](https://img-blog.csdnimg.cn/img_convert/da10314c56b9acf4414f1db3a5bf4611.png)

```javascript
sap.ui.define(['sap/ui/Device'], function(Device) {
```

可以看到 Device.js 檔案內，有這兩行程式碼進行預設 RangeSet 的初始化：

```javascript
	//Always initialize the default media range set
	Device.media.initRangeSet();
	Device.media.initRangeSet(RANGESETS["SAP_STANDARD_EXTENDED"]);
```

Device.media._predefinedRangeSets 就是 SAP UI5 官網裡介紹的預定義的 Range Set：

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

預設的 RangeSet：

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

預設的 RangeSet 是 `SAP_STANDARD`, 如下圖第 1041 行程式碼所示：

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

兩個 point 決定三個 device type：
![](https://img-blog.csdnimg.cn/img_convert/00a064e02c3795d729913103b746e0f1.png)

三個 query 和對應的 device type：
![](https://img-blog.csdnimg.cn/img_convert/dcff377aa5210caf002a0aed428c31fc.png)

這裡是透過 window 原生 API，matchMedia 來計算的。

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

註冊 RangeSet 變更的事件監聽函式：

```javascript
if (oQuery.media.addEventListener) {
oQuery.media.addEventListener("change", oConfig.listener);
```

`sap.ui.Device.orientation`：
![](https://img-blog.csdnimg.cn/img_convert/56cce4792371b9a1b14387ffb42d4a87.png)

`sap.ui.Device.os`：

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

這裡設定 `oReducedNavigator`：

```javascript
var setDefaultNavigator = function () {
		oReducedNavigator = {
			userAgent: window.navigator.userAgent,
			platform: window.navigator.platform
		};
		// Only add property standalone in case navigator has this property
		if (window.navigator.hasOwnProperty("standalone")) {
			oReducedNavigator.standalone = window.navigator.standalone;
		}
	};
```
首先使用正規表示式試圖匹配 iOS 系統：
![](https://img-blog.csdnimg.cn/img_convert/f5c3e64fdb2ecb1b5e4164a4b078f96c.png)

```javascript
rPlatform = /\(([a-zA-Z ]+);\s(?:[U]?[;]?)([\D]+)((?:[\d._]*))(?:.*[\)][^\d]*)([\d.]*)\s/;
		aMatches = userAgent.match(rPlatform);
		if (aMatches) {
			var rAppleDevices = /iPhone|iPad|iPod/;
```

如果匹配不成功，再試圖匹配 Android：

```javascript
//Firefox on Android
		rPlatform = /\((Android)[\s]?([\d][.\d]*)?;.*Firefox\/[\d][.\d]*/;
		aMatches = userAgent.match(rPlatform);
		if (aMatches) {
			return ({
				"name": OS.ANDROID,
				"versionStr": aMatches.length == 3 ? aMatches[2] : ""
			});
		}
```
![](https://img-blog.csdnimg.cn/img_convert/e96687a7d9a25675b8d9109de5501528.png)

最後再匹配 DesktopOS：
![](https://img-blog.csdnimg.cn/img_convert/6c7598f48b2a95b8561006b61b579b69.png)

從 `userAgent` 欄位就能知道是 Windows10，X64 架構：

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

最後設定到 Device 物件裡，方便其他程式碼消費：
![](https://img-blog.csdnimg.cn/img_convert/06ba9f842e01f26add0c17aeb816871b.png)

OS 大寫，模擬其他程式語言裡的列舉型別。

## sap.ui.Device.resize

儲存了當前視窗的寬度(width)和高度(height)。

在 SAP UI5 應用初始化時，會執行 `setResizeInfo(Device.resize);`

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

執行到這一步時，Device 物件明細如下圖：
![](https://img-blog.csdnimg.cn/img_convert/21c6a1e2ec8f3fec217baaee30e1bb34.png)

使用 `windowsSize` 獲取當前 window 尺寸：
![](https://img-blog.csdnimg.cn/img_convert/619109128858dd85ccd8b4a1f596850e.png)

實際上就是使用的 windows 全域性物件的 innerHeight 和 innerWidth 這兩個屬性。

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

Support Detect 的實現原始碼：

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

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

Device.support.touch = detectTouch();
```

SAP UI5 sap.ui.Device.media.initRangeSet 方法的單步除錯

相關文章