[通用]移动端自适应

1.1 版本

1.2 应用场景

PC 端制作的报表在手机端查看时，FineReport 默认提供的自适应效果不尽人意。

例如，报表比较大，在手机上被缩的非常小，字体模糊等。

此时可通过移动端属性里的「自适应」选项，手动控制报表在移动端上的显示效果。

1.3 注意事项

1）移动端自适应属性设置完成后，只在 HTML5 端和 App 端生效。

2）配置移动端自适应后若模板推送显示 PC 端效果，建议将 PC 端自适应属性设置为「默认」或「不自适应」。

2.1 功能入口

在普通报表中，点击菜单栏「模板>移动端属性」，可以看到设置自适应的界面， 横屏和竖屏可分开设置，如下图所示：

2.2 自适应

横屏 和 竖屏 的自适应设置都分为：「横向自适应」、「纵向自适应」、「双向自适应」、「不自适应」四种。

以 竖屏 为例，具体预览效果如下表所示：

注1：以下表格的效果图来源于 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\图像化显示进度条.cpt 模板。

注2：有些手机型号会出现「横向自适应」不生效的问题，此时用户可将模板中的单元格高度拉高，这样可确保横向自适应之后纵向高度能完整显示文本内容。

自适应属性	说明	预览效果
横向自适应	报表按比例缩放，横向充满屏幕
纵向自适应	纵向充满，如果大则缩小，如果小则放大， 横向可滑动查看
双向自适应	所有单元格的宽度和高度，同步拉伸或缩小，充满整个屏幕
不自适应	展示报表的原始大小

3.1 画布自适应

3.1.1 功能入口

详情参见：FVS可视化看板画布自适应 ，如下图所示：

3.1.2 画布自适应

• 未开启移动端布局时，画布自适应的五种自适应方式：「自动」、「高度铺满」、「宽度铺满」、「双向铺满」、「无」，对整个模板所有分页生效。

• 开启移动端布局时，画布自适应设置不生效。组件大小会按照画布尺寸重新计算，组件布局继承模板画布中从左至右、从上到下的组件/组合顺序，图层重叠时按照从顶层至底层的顺序进行展示。

为方便清晰展示，示例模板页面设置为蓝色，画布大小为 375*600 ，饼图组件背景设置为白色，铺满整个画布。具体如下表所示：

布局方式	自适应方式	说明	预览效果
保留布局	自动	画布等比例自适应后保持一屏展示 会存在某一个方向两边留白
	高度铺满	画布纵向铺满屏幕，横向等比例缩放 若横向小于屏幕宽度，则左右两边留白 若横向大于屏幕宽度，超出部分可左右滑动查看
	宽度铺满	画布横向铺满屏幕，纵向等比例缩放 若纵向小于屏幕高度，则上下两边留白 若纵向大于屏幕高度，超出部分可上下滑动查看
	双向铺满	画布横向、纵向均铺满屏幕
	无	画布保持设计器中设置的大小
重布局	-	-

3.2 表格组件内容适应

3.2.1 功能入口

切换至移动端预览界面，选中表格组件，即可在右侧的内容适应方式中设置「高度铺满」、「宽度铺满」、「双向铺满」、「无」四种内容适应方式，如下图所示：

3.2.2 内容适应方式

1）未开启移动端布局时，表格组件内容按照设置的内容适应方式铺满表格组件显示。

2）开启移动端布局时，表格组件内容始终保持高度铺满。

• 内容适应方式设置为「无」和「高度铺满」展示效果相同，均为内容高度铺满组件。若横向内容小于组件宽度，则有留白；若大于组件宽度，则可左右滑动查看。

• 内容适应方式设置为「宽度铺满」和「双向铺满」展示效果相同，均为内容双向铺满组件。

决策报表支持对 模板整体 设置 移动端自适应属性 ，也支持对 报表块 和 图表 单独设置移动端自适应属性。

以下以 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\决策报表入门.frm 为例。

4.1 模板整体

4.1.1 功能入口

在决策报表中，点击菜单栏「模板>移动端属性」，勾选「设置为手机端模板」时，默认勾选「自适应属性自动匹配」。

4.1.2 效果预览

以 App 为例，如下图所示：

4.2 报表块

4.2.1 功能入口

点击右侧「report0」，选择「移动端」，可看到「自适应」设置面板，保留布局和重布局下的设置项不同，重布局时多出的设置项用橙色方框标出，如下图所示：

4.2.2 自适应

1）横屏、竖屏 的四种自适应方式同普通报表。

允许全屏 详情参见：[通用]组件全屏开关控制 。

组件可选中 详情参见：[通用]组件选中激活 。

手机显示限制高度 详情参见：[通用]组件显示限制高度 。

2）展开收起 是在重布局时出现的设置项，分为「无」和「自定义」，默认为「无」。

「自定义」的设置界面如下图所示：

具体设置项的说明如下表所示：

3）展开收起 选择「自定义」，具体设置如下图所示：

4）移动端效果预览，以 App 为例，如下图所示：

4.3 图表

4.3.1 功能入口

点击右侧「chart0」，选择「移动端」，可看到「图表自适应」设置面板，保留布局和重布局下下的设置项不同，重布局时多出的设置项用橙色方框标出，如下图所示：

4.3.2 图表自适应

1）允许全屏 详情参见：[通用]组件全屏开关控制 。

组件可选中 详情参见：[通用]组件选中激活 。

2）放大逻辑 为重布局时出现的设置项，固定为「等比例自适应」。

3）缩小逻辑 为重布局时出现的设置项，分为「自动匹配」、「等面积自适应」、「等比例自适应」三种，默认选择「自动匹配」。

• 自动匹配：系统根据模板自动匹配缩小逻辑。

• 等面积自适应：保持面积相等，横向压缩，纵向放大，最大高度为屏幕显示区域的 80% 。

• 等比例自适应：保持宽高比例不变，等比例自适应。

4）展开收起 为重布局时出现的设置项，和报表块的 展开收起 一样分为「无」和「自定义」，默认为「无」。

「自定义」的设置界面与 报表块「移动端>自适应>展开收起>自定义」相比，少了「行号>显示按钮>第N行开始收起」，其余设置项相同，如下图所示：

5）缩小逻辑  选择「等面积自适应」，其余保持默认，具体设置如下图所示：

6）移动端效果预览，以 App 为例，如下图所示：