SAP UI5 应用的屏幕尺寸检测工作原理深入剖析试读版

本教程之前的步骤：

SAP UI5 应用开发教程之一百三十四 - SAP UI5 Simple Form 属性 columnsL，columnsM，columnsXL 的属性深入剖析

我们深入分析了 SAP UI5 SimpleForm 控件属性 columnsL，columnsM，columnsXL 的工作原理。这里进行简单的回顾：

当我们在 Display.fragment.xml 里将 columnsXL，columnsL 和 columnsM 属性均设置为 1 时，下图代码第 9 行设置的 ResponsiveGridLayout, 即响应式网格布局，将 SimpleForm 控件的全部宽度(100%) 用来显示 Form 控件内包含的 Label 和 Text 元素。其原因是这三个属性的含义是响应式网格布局的列数，现在列数为 1，故 Form 内的 Label 和 Text 元素占据了 100% 的宽度。

下图是 columns 为 1 的效果，可以看到 SimpleForm 控件内的元素，水平方向撑满了整个屏幕：

columns 属性等于 2 的效果，SimpleForm 控件的布局分为了两列，每列占据 SimpleForm 宽度的二分之一:

columns 属性等于 3 的效果，SimpleForm 控件的布局分为了三列，每列占据 SimpleForm 宽度的三分之一:

然而，我们注意到，无论是 columns 属性还是 labelSpan 属性，属性名后面还跟了类似 S，M，L 和 XL 的后缀。这些后缀与属性名一起，定义了 SAP UI5 SimpleForm 控件在不同尺寸的屏幕下的不同行为。

本步骤将详细介绍 SAP UI5 应用屏幕尺寸类型(S，M，L 和 XL) 的判定原理。