反馈已提交

网络繁忙

[通用]移动端自适应

  • 文档创建者:lu123
  • 历史版本:33
  • 最近更新:Alicehyy 于 2023-01-10
  • 1. 概述

    1.1 版本

    App版本
    V11.0

    1.2 应用场景

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

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

    1.3 注意事项

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

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

    2. 移动端自适应介绍

    2.1 设置方法

    2.1.1 普通报表

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

    Snag_e2d083.png

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

    2.1.2 决策报表

    决策报表中支持对组件单独设置移动端属性,也支持对模板整体设置移动端属性。

    1)在决策报表中,选中某一报表块或图表块,在下方「移动端」属性面板中,可设置对应组件的自适应效果。如下图所示:

    Snag_e919e3.png

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

    Snag_ed3027.png

    2.2 手机端模板说明

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

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

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

    2.3 自适应效果

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

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

    注:效果图来源于 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\图像化显示进度条.cpt 模板。

    自适应属性说明预览效果
    横向自适应报表按比例缩放,横向充满屏幕1584520292802521.jpg
    纵向自适应

    纵向充满,如果大则缩小,如果小则放大

    横向可滑动查看

    Screenshot_20230110_171354_com.finereact.v11(1).jpg
    双向自适应所有单元格的宽度和高度,同步拉伸或缩小,充满整个屏幕Screenshot_20230110_171808_com.finereact.v11(1).jpg
    不自适应

    展示报表的原始大小

    Screenshot_20230110_171937_com.finereact.v11(1).jpg

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

    2.4 缩放逻辑

    在移动端属性设置中,默认勾选「允许双击/双指缩放」,在移动端预览模板时,则可以通过手指双击或双指滑动缩放模板。

    Snag_198804b.png

    • 双击缩放:第一次双击放大,放大比例固定,第二次双击缩小回初始状态。效果如下图所示:

    7C3E0A39-75C2-4A66-9BF5-F2338E426A01.GIF

    • 双指缩放:双指按住屏幕,滑动实现放大或缩小,缩放比例无限制。如下图所示:

    85F85CE6-60D9-400B-A353-B37B6BC71F3A.GIF

    3. Pad 组件标题字号适应

    Pad 上移动端模板组件标题字号支持自动适应该设备,该功能范围说明如下表所示:

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


    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持