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. 决策报表编辑
决策报表支持对 报表块 和 图表 单独设置移动端自适应属性，也支持对 模板整体 设置 移动端自适应属性 。
以下以 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\决策报表入门.frm 为例。
3.1 报表块
3.1.1 功能入口
1）点击下载模板： 决策报表入门.frm 在 FineReport 设计器中打开，
或直接在 FineReport 设计器中打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\决策报表入门.frm 。
2）点击右侧「report0」，选择「移动端」，可看到「自适应」设置面板，保留布局和重布局下的设置项不同，重布局时多出的设置项用橙色方框标出，如下图所示：
3.1.2 自适应
1）横屏、竖屏 的四种自适应方式同普通报表。
允许全屏 详情参见：[通用]组件全屏开关控制 。
组件可选中 详情参见：[通用]组件选中激活 。
手机显示限制高度 详情参见：[通用]组件显示限制高度 。
2）展开收起 是在重布局时出现的设置项，分为「无」和「自定义」，默认为「无」。
「自定义」的设置界面如下图所示：
具体设置项的说明如下表所示：
| 设置项 | 说明 | |
|---|---|---|
| 行号 | 显示按钮 | 支持设置从第N行开始收起 |
| 展开收起按钮 | 显示按钮 | 支持设置是否在标题右侧显示按钮 |
| 按钮颜色 | 支持设置按钮颜色 | |
| 收起时文字提示 | 支持设置收起时文字提示内容 | |
| 展开时文字提示 | 支持设置展开时文字提示内容 | |
| 默认状态 | 支持设置默认状态：收起或展开 | |
3）展开收起 选择「自定义」，具体设置如下图所示：
4）移动端效果预览，以 App 为例，如下图所示：
3.2 图表
3.2.1 功能入口
1）点击下载模板： 决策报表入门.frm 在 FineReport 设计器中打开，
或直接在 FineReport 设计器中打开模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\决策报表入门.frm。
2）点击右侧「chart0」，选择「移动端」，可看到「图表自适应」设置面板，保留布局和重布局下下的设置项不同，重布局时多出的设置项用橙色方框标出，如下图所示：
3.2.2 图表自适应
1）允许全屏 详情参见：[通用]组件全屏开关控制 。
组件可选中 详情参见：[通用]组件选中激活 。
2）放大逻辑 为重布局时出现的设置项，固定为「等比例自适应」。
3）缩小逻辑 为重布局时出现的设置项，分为「自动匹配」、「等面积自适应」、「等比例自适应」三种，默认选择「自动匹配」。
自动匹配：系统根据模板自动匹配缩小逻辑。
等面积自适应：保持面积相等，横向压缩，纵向放大，最大高度为屏幕显示区域的 80% 。
等比例自适应：保持宽高比例不变，等比例自适应。
4）展开收起 为重布局时出现的设置项，和报表块的 展开收起 一样分为「无」和「自定义」，默认为「无」。
「自定义」的设置界面与 报表块「移动端>自适应>展开收起>自定义」相比，少了「行号>显示按钮>第N行开始收起」，其余设置项相同，如下图所示：
5）缩小逻辑 选择「等面积自适应」，其余保持默认，具体设置如下图所示：
6）移动端效果预览，以 App 为例，如下图所示：
3.3 模板整体
3.3.1 功能入口
在决策报表中，点击菜单栏「模板>移动端属性」，勾选「设置为手机端模板」时，默认勾选「自适应属性自动匹配」。
3.3.2 效果预览
以 App 为例，如下图所示：
4. FVS 可视化看板编辑
4.1 画布自适应
4.1.1 准备模板
点击下载准备模板：移动端画布自适应.fvs
为方便清晰展示，此模板页面设置为蓝色，画布大小为 375*600 ，饼图组件背景设置为白色，铺满整个画布。
画布自适应 功能入口、PC 端效果详情参见：FVS可视化看板画布自适应
4.1.2 自适应
FVS 可视化看板移动端保留布局时，画布自适应的五种自适应方式：自动、高度铺满、宽度铺满、双向铺满、无，对整个模板所有分页生效。
注： FVS 可视化看板移动端重布局时，画布自适应设置不生效。组件大小会按照画布尺寸重新计算，组件布局继承模板画布中从左至右、从上到下的组件/组合顺序，图层重叠时按照从顶层至底层的顺序进行展示。
自动：画布等比例自适应后保持一屏展示，会存在某一个方向两边留白，如下图所示：
高度铺满：画布纵向铺满屏幕，横向等比例缩放。若横向小于屏幕宽度，则左右两边留白；若横向大于屏幕宽度，超出部分可左右滑动查看。如下图所示：
宽度铺满：画布横向铺满屏幕，纵向等比例缩放。若纵向小于屏幕高度，则上下两边留白；若纵向大于屏幕高度，超出部分可上下滑动查看。如下图所示：
双向铺满：画布横向、纵向均铺满屏幕。如下图所示：
无：画布保持设计器中设置的大小，不自适应。如下图所示：
4.2 表格内容自适应
4.2.1 准备模板
点击下载准备模板：移动端表格自适应.fvs
为方便清晰展示，此模板移动端设置为保留布局，画布自适应设置为「无」，页面设置为蓝色，画布大小为 375*600 ，表格组件背景设置为白色，铺满整个画布。
注：FVS 可视化看板移动端重布局时，表格组件内容始终保持高度铺满。此时，内容自适应方式设置为「无」和「高度铺满」展示效果相同；设置为「宽度铺满」和「双向铺满」展示效果相同。
4.2.2 功能入口
切换至移动端预览界面，选中表格组件，即可在右侧的内容自适应方式中设置「高度铺满」、「宽度铺满」、「双向铺满」、「无」四种内容自适应方式，如下图所示：
4.2.3 内容自适应
高度铺满：表格内容纵向铺满表格组件，横向等比例缩放。若横向小于表格组件宽度，则有留白；若横向大于表格组件宽度，超出部分可左右滑动查看。如下图所示：
宽度铺满：表格内容横向铺满表格组件，纵向等比例缩放。若纵向小于表格组件高度，则有留白；若纵向大于表格组件高度，超出部分可上下滑动查看。如下图所示：
双向铺满：表格内容横向、纵向均铺满表格组件。如下图所示：
无：表格内容保持设计器中设计的大小，不自适应。若横向小于表格组件宽度，则有留白，若大于表格组件宽度，超出部分可左右滑动查看；若纵向小于表格组件高度，则有留白，若大于表格组件高度，超出部分可上下滑动查看。如下图所示：
