本教程有个学习者和我探讨对于 sap.m.Table
这个控件的响应式个性(responsiveness).
所谓响应式设计(Responsive Design),是指一种前端开发畛域的设计办法,它的目标是让网站或应用程序,可能主动适应不同的设施尺寸和屏幕分辨率,从而提供更好的用户体验。
那么该如何了解 可能主动适应不同的设施尺寸和屏幕分辨率
这句话的具体含意?这也是该学习者向我提出,心愿我具体论述的问题。
响应式设计通过应用 CSS 媒体查问技术,依据不同的设施屏幕尺寸和分辨率,主动调整网站或应用程序的布局、字体大小、图片尺寸等元素的大小和地位,以适应不同的设施,包含台式电脑、笔记本电脑、平板电脑和智能手机等。
对于 CSS 媒体查问技术,即 Media Query,笔者在本教程这篇文章里介绍过:
- SAP UI5 利用开发教程之一百三十五 – SAP UI5 利用的屏幕尺寸检测工作原理深刻分析
媒体查问技术基于 window.matchMedia()
, 这个函数由浏览器提供原生实现,用于查看以后浏览器是否匹配指定的媒体查问条件。该函数接管一个字符串参数作为输出参数,该参数示意要查看的媒体查问条件。
媒体查问条件通常用于在 CSS 中定义响应式布局,依据设施的屏幕宽度或其余个性来利用不同的款式。同时,window.matchMedia() 函数也能够在 JavaScript 代码中应用,用于依据设施属性或窗口大小等条件执行不同的操作。
window.matchMedia() 函数返回一个 MediaQueryList
对象,该对象蕴含一个 matches
属性,批示以后浏览器是否匹配指定的媒体查问条件。如果匹配,则 matches
属性的值为 true;否则为 false
.
本教程后续咱们也会再次复习这个技术。
SAP UI5 弱小之处就在于它在命名空间 sap.m
之下提供的很多控件,自身就曾经反对响应式设计了。这意味着 SAP UI5 开发人员,不须要再去操心不同屏幕大小的设施上运行 SAP UI5 利用的适配性问题。应用 sap.m
命名空间下的控件,实践上咱们只须要在桌面浏览器上开发测试,在其余设施上的自适应体现行为,曾经由 SAP UI5 框架控件的实现人员,帮咱们包办了。
回到这位敌人的问题:
我用 sap.m.Table 控件,绘制了一个表格,蕴含了几个列。我发现这个表格每一列的宽度,的确随着屏幕宽度的变动而变动。
然而我在 Chrome 开发者工具里通过设施模拟器测试发现,就算屏幕宽度变得再小,sap.m.Table 也总是将所有表格列全副从左到右顺次显示进去,如下图所示,在 iPhone 12 Pro 设施上,这 6 列仍然被全副显示了进去,不少列的题目文本和值,都呈现了显示的单词被截断成两行显示的情景,很影响应用体验。
为什么
sap.m.Table
在窄屏设施比方手机上并没有体现出我冀望的响应式显示成果?
这位敌人冀望的成果是,在手机上 sap.m.Table
应该 智能地
将某些列 暗藏
,或者 采取其余形式
显示。
本文余下局部解答这位敌人的这些疑难。