在 Chrome 開發者工具裡使用 SAP UI5 擴充套件 `Inspector` 修改 Grid 控制元件的 `defaultSpan` 屬性，會觸發如下的程式碼：

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

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

我們透過呼叫棧，可以發現 SAP UI5 Grid 相關的框架程式碼呼叫，確實是 Chrome 擴充套件 UI5 Inspector 觸發的：

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

相關程式碼：GridRenderer：
![](https://img-blog.csdnimg.cn/img_convert/34d3b1dce364bee5a039f44ccac80214.png)

外層的 grid container 佔據的是整個螢幕的寬度：

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

第一個 form container：佔據螢幕 1/2 寬度：
![](https://img-blog.csdnimg.cn/img_convert/5197da1f9cf27575ffbb45032454dea2.png)

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

但這裡卻是 3 3 6 12：

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

取得 grid 的 width：
![](https://img-blog.csdnimg.cn/img_convert/49d080f9a3b7121e4a272dd5b06a2b3d.png)

預設值：3 3 6 12
![](https://img-blog.csdnimg.cn/img_convert/21b19cf4abe3e66e186eb537c457c3d7.png)

Form container 內每個元素沒有顯式分配 width 吧？至少在 GridRender.js 里根據原始碼搜尋沒有發現。這說明，是用其它方式來控制 Grid 內的元素相對位置的。

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

根據除錯，發現這個 css 類控制了 50% 的寬度顯示：`.sapUiRespGridSpanL6`

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

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

改成 80% 之後，就變寬了：
![](https://img-blog.csdnimg.cn/img_convert/e91ca7d086d0628becbe4019067389cf.png)

label 16.67% 2 / 12 等於六分之一：

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

為什麼是2？

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

但為啥選擇的是 L2，而不是 M3？

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

切換成 iPhone 之後：`.sapUiRespGridMedia-Std-Phone.sapUiRespGridHSpace0>.sapUiRespGridSpanS4`

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

CSS 類名稱更改了，型別從之前的 Desktop 變成了 Phone.

4 除以 12 等於 1/3.

切換成 Tablet 之後，M3，四分之一：25%

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

這些出現在 CSS 類裡的裝置名稱，無論是 Desktop，還是 Tablet，Phone，都是基於各種指標的使用裝置的基本分類。

這些指標的例子是對觸控事件的支援、使用的作業系統和瀏覽器的使用者代理。

注意：沒有簡單的方法可以從瀏覽器提供的資訊中準確地確定使用的裝置。 因此，我們特別依賴使用者代理。 因此，結合給定的裝置功能，可以將多個標誌設定為真，特別是對於具有觸控功能的桌面裝置和請求將網頁作為桌面頁面的移動裝置來說。

SAP UI5 sap.ui.layout.Grid 控制元件寬度百分比的設定原理

相關文章