历史版本21 :[通用]移动端自适应 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1.版本编辑
| 移动端版本 |
|---|
| APP9.0 |
2. 描述编辑
PC上制作好的报表，在手机端查看的时候，默认FR提供的自适应效果不尽人如意。例如，报表比较大，到手机上被缩的非常小，字都看不清等等。
这个时候就可以通过移动端属性里的自适应选项，手动控制报表在移动终端上的显示效果。
注：这里移动端自适应属性设置完成后，只有HTML5方式预览报表和APP中原生报表会生效
3. 步骤编辑
3.1 普通报表和决策报表设置方法
a.普通报表中，点击模板>移动端属性，即可弹出移动端属性
b.决策报表中，在报表块>移动端属性面板中，即可设置移动端自适应
或者点击模板>移动端属性，弹出移动端属性，可设置为手机端专属模板
3.2 自适应规则说明
竖屏及横屏自适应的规则可以分开控制，其中pad上的规则也采用横屏这个设置。
下拉框中我们可以看到有4个选项，分别为横向自适应、纵向自适应、不自适应、双向自适应；
1）横向自适应
横向充满，如果大则缩小，如果小则放大；
2）纵向自适应
纵向充满，如果大则缩小，如果小则放大；
3）不自适应
展示报表的原始大小；
4）双向自适应：
所有单元格的宽度，同步拉伸或缩小，使充满整个组件，每列列宽比例不变；
所有单元格的高度同理；
3.3 手机端模板说明
1）普通报表
勾选设置为手机模板画布大小
报表会以4.7寸屏幕手机为准进行适配，4.7寸以上的手机进行放大，4.7寸以下的手机进行压缩；
2）决策报表
勾选设置为手机端专属模板
画布大小（375*560），宽度进行锁定，高度可自定义修改；
同普通报表，决策报表也会以4.7寸屏幕手机为准进行适配，4.7寸以上的手机进行放大，4.7寸以下的手机进行压缩；
自适应属性自动匹配可选，当勾选并点击确认后，表单body的组件缩放设置为横向自适应，如下图：
4. 示例编辑
例如，下面的报表在PC浏览器中显示如下：
表比较宽，这个时候用手机查看，默认效果如下图：
可以看到，默认效果会将报表缩的很小，以至于字都看不清了，这种情况下，可以对这张报表，设置竖屏自适应规则，如改成竖屏>纵向自适应，或者将模板设置没手机模板，如下图：
手机上刷新报表，就可以看到，报表纵向充满了，如下图：
5. 缩放逻辑编辑
自适应属性横屏和竖屏分开来都可以控制，且都有4个状态：横向自适应、纵向自适应、不自适应、双向自适应；
（横屏也可以设置主要是针对pad上冻结的报表及手机上横向比较宽的报表，如果定死横向自适应，会缩的比较小）
5.1 横屏
初始比例 = 宽度刚好充满，最小比例 = 初始比例；
5.2 竖屏
1）报表比较宽缩到宽度刚好充满时，报表的高度/屏幕高度 >= 0.3：初始比例 = 宽度充满，最小比例 = 初始比例；
否则： 初始比例 = 高度充满，最小比例 = 1.0和宽度充满中的最小值；
2）报表比较高
初始比例 = 宽度充满，最小比例 = 初始比例；
这些所有都有个限制：初始缩放比例不能大于1.5，如果大于的话，初始比例就等于1.5；
最小缩放比例也不能大于1.5，如果大于的话，设置为1
5.3 横向自适应
即始终宽显示全（主要针对参数查询后，最后一页显得特别大的情况）
5.4 纵向自适应
即始终高度显示全（主要针对表比较宽的情况，纵向不想要留白）
5.5 不自适应
原大小显示（主要针对表比较大、或宽或者设置了冻结的情况）
5.6 双向自适应
双向自适应即双向都不出现滚动条双向自适应只适用于不足一屏及超出一屏不多的情况，如果模板超出一屏很多，或者是分页了，则双向自适应就不适用了