1. Chrome有时出现字号和设计时不一致编辑
应该是浏览器对最小字号进行了限制。Chrome 浏览器默认设置了最小字体,在预览时,若设计字号小于浏览器最小字号,则以浏览器最小字号为准。
比如 Chrome 浏览器的最小字体为 12 号,在开启字体自适应后,模板在较小分辨率下展示时,字体理论上如果缩小 10 号,但实际显示为 12 号字体。
打开 Chrome 浏览器,按照"设置→外观→自定义字体"的步骤,最小字体设置如下调整即可:

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);
}
})

