[通用]移动端自适应

编辑
  • 文档创建者:印然
  • 浏览次数:16585次
  • 编辑次数:25次
  • 最近更新:Kevin-s 于 2019-06-06
  • 1.版本

    移动端版本  
      App9.0

    2. 描述

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

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

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

    注:这里移动端自适应属性设置完成后,只有 HTML5 方式预览报表和 App 中原生报表会生效

    3. 步骤

    3.1 普通报表和决策报表设置方法

    a.普通报表中,点击模板>移动端属性,即可弹出移动端属性,如下图所示:

    222

    注:若模板中有内容,在设置为手机端专属模板时,会触发另存为以“_mobile”为后缀的模板,详情参考:设置手机端模板


    b.决策报表中,在报表块>移动端属性面板中,即可设置移动端自适应

    222

    或者点击模板>移动端属性,弹出移动端属性,可设置为手机端专属模板

    222

    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的组件缩放设置为横向自适应,如下图:

    222

    4. 示例

    例如,下面的报表在 PC 浏览器中显示如下:

    222

    表比较宽,这个时候用手机查看,默认效果如下图:


    可以看到,默认效果会将报表缩的很小,以至于字都看不清了,这种情况下,可以对这张报表,设置竖屏自适应规则,如改成竖屏>纵向自适应,或者将模板设置没手机模板,如下图:

    222

    手机上刷新报表,就可以看到,报表纵向充满了,如下图:

    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 双向自适应

    双向自适应即双向都不出现滚动条

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


    附件列表


    主题: 移动端应用
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]