ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2022-02-06 16:57:59  阅读:148  来源: 互联网

标签:教程 url 适配 UI5 Device SAP 设备


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

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

本步骤的源代码,在这个 Github 仓库下载:https://github.com/wangzixi-diablo/ui5-tutorial/tree/main/34

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

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

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

点击 > 之后,展开 Panel 后的效果如下:

标签:教程,url,适配,UI5,Device,SAP,设备
来源: https://blog.csdn.net/i042416/article/details/122799506

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有