1. 概述
1.1 版本
| 报表服务器版本 | App 版本 | HTML5 移动端展现插件版本 |
|---|---|---|
| 11.0 | V11.0 | V11.0 |
1.2 应用场景
PC 端制作的报表在手机端查看时，FineReport 默认提供的自适应效果不尽人意。
例如，报表比较大，在手机上被缩的非常小，字体模糊等。
此时可通过移动端属性里的「自适应」选项，手动控制报表在移动端上的显示效果。
1.3 注意事项
1）移动端自适应属性设置完成后，只在 HTML5 端和 App 端生效。
2）配置移动端自适应后若模板推送显示 PC 端效果，建议将 PC 端自适应属性设置为「默认」或「不自适应」。
2. 普通报表
2.1 功能入口
在普通报表中，点击菜单栏「模板>移动端属性」，可以看到设置自适应的界面， 横屏和竖屏可分开设置，如下图所示：
2.2 自适应
横屏 和 竖屏 的自适应设置都分为：「横向自适应」、「纵向自适应」、「双向自适应」、「不自适应」四种。
以 竖屏 为例，具体预览效果如下表所示：
注1：以下表格的效果图来源于 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\图像化显示进度条.cpt 模板。
注2：有些手机型号会出现「横向自适应」不生效的问题，此时用户可将模板中的单元格高度拉高，这样可确保横向自适应之后纵向高度能完整显示文本内容。
| 自适应属性 | 说明 | 预览效果 |
|---|---|---|
| 横向自适应 | 报表按比例缩放，横向充满屏幕 | |
| 纵向自适应 | 纵向充满，如果大则缩小，如果小则放大， 横向可滑动查看 | |
| 双向自适应 | 所有单元格的宽度和高度，同步拉伸或缩小，充满整个屏幕 | |
| 不自适应 | 展示报表的原始大小 | |
3. FVS 可视化看板
3.1 画布自适应
3.1.1 功能入口
详情参见：FVS可视化看板画布自适应 ，如下图所示：
3.1.2 画布自适应
未开启移动端布局时，画布自适应的五种自适应方式：「自动」、「高度铺满」、「宽度铺满」、「双向铺满」、「无」，对整个模板所有分页生效。
开启移动端布局时，画布自适应设置不生效。组件大小会按照画布尺寸重新计算，组件布局继承模板画布中从左至右、从上到下的组件/组合顺序，图层重叠时按照从顶层至底层的顺序进行展示。
为方便清晰展示，示例模板页面设置为蓝色，画布大小为 375*600 ，饼图组件背景设置为白色，铺满整个画布。具体如下表所示：
| 布局方式 | 自适应方式 | 说明 | 预览效果 |
|---|---|---|---|
| 保留布局 | 自动 | 画布等比例自适应后保持一屏展示 会存在某一个方向两边留白 | |
| 高度铺满 | 画布纵向铺满屏幕，横向等比例缩放 若横向小于屏幕宽度，则左右两边留白 若横向大于屏幕宽度，超出部分可左右滑动查看 | | |
| 宽度铺满 | 画布横向铺满屏幕，纵向等比例缩放 若纵向小于屏幕高度，则上下两边留白 若纵向大于屏幕高度，超出部分可上下滑动查看 | | |
| 双向铺满 | 画布横向、纵向均铺满屏幕 | | |
| 无 | 画布保持设计器中设置的大小 | | |
| 重布局 | - | - | |
3.2 表格组件内容适应
3.2.1 功能入口
切换至移动端预览界面，选中表格组件，即可在右侧的内容适应方式中设置「高度铺满」、「宽度铺满」、「双向铺满」、「无」四种内容适应方式，如下图所示：
3.2.2 内容适应方式
1）未开启移动端布局时，表格组件内容按照设置的内容适应方式铺满表格组件显示。
2）开启移动端布局时，表格组件内容始终保持高度铺满。
内容适应方式设置为「无」和「高度铺满」展示效果相同，均为内容高度铺满组件。若横向内容小于组件宽度，则有留白；若大于组件宽度，则可左右滑动查看。
内容适应方式设置为「宽度铺满」和「双向铺满」展示效果相同，均为内容双向铺满组件。
4. 决策报表
决策报表支持对 模板整体 设置 移动端自适应属性 ，也支持对 报表块 和 图表 单独设置移动端自适应属性。
以下以 %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）展开收起 是在重布局时出现的设置项，分为「无」和「自定义」，默认为「无」。
「自定义」的设置界面如下图所示：
具体设置项的说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 行号 | 显示按钮 | 支持设置从第N行开始收起 |
| 展开收起按钮 | 显示按钮 | 支持设置是否在标题右侧显示按钮 |
| 按钮颜色 | 支持设置按钮颜色 | |
| 收起时文字提示 | 支持设置收起时文字提示内容 | |
| 展开时文字提示 | 支持设置展开时文字提示内容 | |
| 默认状态 | 支持设置默认状态：收起或展开 | |
3）展开收起 选择「自定义」，具体设置如下图所示：
4）移动端效果预览，以 App 为例，如下图所示：
4.3 图表
4.3.1 功能入口
点击右侧「chart0」，选择「移动端」，可看到「图表自适应」设置面板，保留布局和重布局下下的设置项不同，重布局时多出的设置项用橙色方框标出，如下图所示：
4.3.2 图表自适应
1）允许全屏 详情参见：[通用]组件全屏开关控制 。
组件可选中 详情参见：[通用]组件选中激活 。
2）放大逻辑 为重布局时出现的设置项，固定为「等比例自适应」。
3）缩小逻辑 为重布局时出现的设置项，分为「自动匹配」、「等面积自适应」、「等比例自适应」三种，默认选择「自动匹配」。
自动匹配：系统根据模板自动匹配缩小逻辑。
等面积自适应：保持面积相等，横向压缩，纵向放大，最大高度为屏幕显示区域的 80% 。
等比例自适应：保持宽高比例不变，等比例自适应。
4）展开收起 为重布局时出现的设置项，和报表块的 展开收起 一样分为「无」和「自定义」，默认为「无」。
「自定义」的设置界面与 报表块「移动端>自适应>展开收起>自定义」相比，少了「行号>显示按钮>第N行开始收起」，其余设置项相同，如下图所示：
5）缩小逻辑 选择「等面积自适应」，其余保持默认，具体设置如下图所示：
6）移动端效果预览，以 App 为例，如下图所示：
