[通用]移动端自适应

  • 文档创建者:印然
  • 编辑次数:29次
  • 最近更新:Leo.Tsai 于 2020-11-26
  • 1. 概述

    1.1 版本

    移动端版本  
      App 9.0

    1.2 应用场景

    PC 端制作的报表在手机端查看时,FineReport 默认提供的自适应效果不尽人意。例如,报表比较大,在手机上被缩的非常小,字体模糊等等。

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

    1.3 功能简介

    对移动端自适应属性进行设置,控制报表在移动终端上的显示效果。

    注1:移动端自适应与手机重布局教学视频地址请查看 模板发布、手机预览与自适应模板布局设计与配色优化

    注2:移动端自适应属性设置完成后,只在 HTML5 端和 App 端生效。

    2. 自适应介绍

    2.1 设置方法

    2.1.1 普通报表

    在普通报表中,点击模板>移动端属性, 如下图所示:

    1584517262713372.png

    注:若模板中有内容,若勾选设置为手机模板画布大小按钮,会触发另存为以「_mobile」为后缀的模板,可参考 设置手机端模板

    2.1.2 决策报表

    1)在决策报表中,选中某一报表块,点击移动端,如下图所示:

    222

    2)或点击模板>移动端属性,可设置为手机端专属模板。如下图所示:

    1584517866931848.png

    2.2 手机端模板说明

    手机端模板说明如下表所示:

    报表类型备注
    普通报表点击模板>移动端属性,勾选设置为手机模板画布大小按钮,报表会以 4.7 寸屏幕手机为准进行适配,4.7 寸以上的手机进行放大,4.7 寸以下的手机进行压缩
    决策报表点击模板>移动端属性,勾选设置为手机端模板按钮,画布大小(375*560),宽度进行锁定,高度可自定义修改

    同普通报表,决策报表也会以 4.7 寸屏幕手机为准进行适配,4.7 寸以上的手机进行放大,4.7 寸以下的手机进行压缩

    2.3 缩放逻辑

    竖屏及横屏自适应的规则可以分开控制,其中 Pad 上的规则采用横屏的设置。

    自适应属性包括:横向自适应纵向自适应不自适应双向自适应。具体说明如下表所示:

    自适应属性说明应用场景
    横向自适应报表横向充满屏幕且保持报表原始宽高比不变主要针对参数查询后,最后一页显得特别大的情况
    纵向自适应纵向充满,如果大则缩小,如果小则放大主要针对表比较宽的情况,纵向不想要留白
    不自适应展示报表的原始大小主要针对表比较大、或宽或者设置了冻结的情况
    双向自适应

    所有单元格的宽度和高度,同步拉伸或缩小,充满整个组件

    只适用于不足一屏及超出一屏不多的情况,如果模板超出一屏很多,或者是分页了,则双向自适应就不适用了

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

    3. 示例

    注:移动端预览方法请参考 移动端模板预览

    3.1 未设置自适应

    1)移动端预览%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\图像化显示进度条.cpt模板,效果如下图所示:

    1584520292802521.jpg

    3.2 设置纵向自适应

    1)可发现,默认效果将报表缩的很小,字体有些模糊,可设置竖屏自适应规则,例如点击模板>移动端属性>竖屏-纵向自适应,如下图所示:

    1584520467933006.png

    2)移动端预览模板,效果如下图所示:

    1584520597706029.jpg

    4. Pad 组件标题字号适应

    4.1 版本

    报表服务器版本App 版本HTML5 移动端展现插件支持功能
    10.010.4.61
    V10.4.61Pad 上移动端模板组件标题字号自动适应该设备

    4.2 范围说明

    之前版本 Pad 上模板标题不能自适应,用户使用 Pad 查看模板时,模板中的组件标题字号太小影响移动端模板体验。若满足本文 4.1 章版本要求,Pad 上移动端模板组件标题字号自动适应该设备。

    该功能范围说明如下表所示:

    移动端设备生效范围终端范围组件类型
    Pad
    表单重布局、表单保留布局App、H5Tab 块标题、报表块标题、图表块标题


    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!