SAP UI5 应用开发教程之三十四 - SAP UI5 应用基于设备类型的页面适配功能(Device Adaptation)

本教程的前一步骤 SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)，我们学习了在 sap.m.Table 控件里，如何使用 minScreenWidth 属性来让表格列项目在不同的屏幕尺寸下动态决定其显示与否的效果。

本步骤继续学习如何使用 SAP UI5 设备检测 API，sap.ui.Device，来使得 SAP UI5 应用在不同的设备类型上达到最佳的显示效果。

本步骤的源代码，在这个 Github 仓库下载。

先看完成的效果。进入文件夹 34，依次执行命令行 npm install 和 ui5 serve, 然后访问 url：

http://localhost:8080/webapp/test/mockServer.html

当我们在设备类型为 Phone 的设备上访问如上 url，能看到下面的页面，Panel 区域被折叠了起来，点击左边的 > 符号可以展开。我们稍后会介绍如何使用 PC 端访问上面的 url，并且通过在 Chrome 开发者工具里将 Device Type 设置成 Phone.