历史版本8 :决策报表自适应常见问题 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. Chrome有时出现字号和设计时不一致编辑

应该是浏览器对最小字号进行了限制。Chrome 浏览器默认设置了最小字体,在预览时,若设计字号小于浏览器最小字号,则以浏览器最小字号为准。

比如 Chrome 浏览器的最小字体为 12 号,在开启字体自适应后,模板在较小分辨率下展示时,字体理论上如果缩小 10 号,但实际显示为 12 号字体。

打开 Chrome 浏览器,按照"设置→外观→自定义字体"的步骤,最小字体设置如下调整即可:

image.png

2. 部分老模板切换至新版后未达理想效果编辑

部分老模板切换至新版决策报表后,模板效果未必能达到完美,需要手动再进行调整,场景如下:

老模板
切换后可能出现的异常效果建议调整方式
自适应布局,使用了绝对画布绝对画布里的组件内容被截断切换后调整绝对画布里的组件位置和尺寸
绝对布局,存在组件位置超出body区域以最外侧组件的边作为body的边界切换前调整组件位置,使组件不超出body边界
绝对布局,body内边距空白较多body内边距空白区域被裁剪切换后手动调整组件位置和效果

转换逻辑说明:

(一)取消勾选全局配置的模板

1.布局方式是什么转换逻辑?

新老操作界面来回切换,布局方式(指自适应布局和绝对布局)不会改变。

注:布局方式的转换逻辑与是否使用全局配置无关。

2.老的模板转换成新的操作界面,属性配置怎么转换?

老自适应配置PC端自适应-报表缩放方式
绝对布局-固定大小不自适应
绝对布局-适应区域双向自适应
自适应布局-双向自适应双向自适应
自适应布局-横向自适应横向自适应

a.老的模板如果单独修改过报表块的Pc浏览器自适应设置,转换成新的操作界面后,属性配置怎么转换?

报表块-Pc浏览器自适应报表块-内容显示方式
不自适应不自动调整
横向自适应横向铺满报表块
双向自适应双向铺满报表块

b.未单独修改过报表块的Pc浏览器自适应属性设置,转成成新的操作界面后,属性配置怎么转换?

老的模板转换成新的操作界面,右侧属性栏中报表块的内容显示方式默认为“不自动调整”

3.新的模板转换成老的操作界面,属性配置怎么转换?

PC端自适应弹窗PC端报表块自适应属性弹窗
字体-自适应字体-自适应
字体-不自适应字体-不自适应
报表缩放方式-双向自适应表格-双向自适应
报表缩放方式-横向自适应表格-横向自适应
报表缩放方式-不自适应表格-不自适应

注1:绝对布局和自适应布局下的模板均采用该逻辑。

报表块-内容显示方式报表块-Pc浏览器自适应
不自动调整Pc浏览器自适应-不自适应
宽度铺满报表块Pc浏览器自适应-横向自适应
双向铺满报表块Pc浏览器自适应-双向向自适应

注:绝对布局下的模板,转换成老的操作界面,默认为绝对布局-固定大小;自适应布局下的模板,转换成老的操作界面,默认为自适应布局-双向自适应。

(二)勾选全局配置的模板,新老操作界面切换后,属性配置怎么转换?

针对使用全局配置的模板,转换成新决策报表操作界面后,将使用新的全局配置。

新的全局配置需在「服务器配置>PC端自适应属性」中设置,如下图所示:

3. 安卓电视新自适应预览,全屏后没有充满/自适应效果不对编辑

原因:安卓电视等大屏设置,目前新自适应没有专门做适配/兼容

排查思路

1)安卓设备是移动端;

URL添加参数force_web=true进行PC端预览,与h5预览进行对比,如果两个有效果欧克的可以使用;

2)看下全屏操作时是否触发resize:
step1、先看下alert是否可以在安卓电视的浏览器上触发弹出来,body添加初始化后事件 window.addEventListener('resize', () => {alert('触发')})

step2、body添加初始化后事件获取宽高,

window.addEventListener('resize', () => {alert('宽 ' + window.innerWidth + ' 高 ' + window.innerHeight)})

step3、body的初始化后事件删掉,拖入一个文本控件,添加如下两个初始化后事件,分别打印初始化的尺寸以及全屏时的尺寸

_g().getWidgetByName("A").setValue("'宽 ' + window.innerWidth + ' 高 ' + window.innerHeight")

var a = "";
window.addEventListener('resize', () => {
    a+='宽 ' + window.innerWidth + ' 高 ' + window.innerHeight+"\n";
    _g().getWidgetByName("A").setValue(a)
})

step4、拖入一个按钮添加点击事件 _g().getWidgetByName('body').resize(960, 540),全屏后点击这个按钮,手动再触发一次resize;

(js语句中的数值是step3中获取的全屏尺寸数值);

如果手动触发resize后,模板充满屏幕了,而原本问题现象是点击全屏后没有充满的话,说明全屏原本并没有触发resize;

step5、目前可以先用在body添加初始化后事件来暂时解决问题,由于有些判断全屏的api不知道电视能不能用,就写死数值,下面的数值是step3中获取的全屏时的尺寸数值,

window.addEventListener('resize', () => {
    if (window.innerWidth === 960
    && window.innerHeight === 540) {
    _g().getWidgetByName('body').resize(960, 540);
}
})