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

目录:

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

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

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

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

image.png

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

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

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

转换逻辑说明:

取消勾选全局配置的模板

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

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

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

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

老自适应配置PC端自适应-报表缩放方式
绝对布局-固定大小不自适应
绝对布局-适应区域双向自适应
自适应布局-双向自适应双向自适应
自适应布局-横向自适应横向自适应
  • 老的模板如果单独修改过报表块的 PC 浏览器自适应设置,转换成新的操作界面后,属性配置怎么转换?

报表块-PC 浏览器自适应报表块-内容显示方式
不自适应不自动调整
横向自适应横向铺满报表块
双向自适应双向铺满报表块
  • 未单独修改过报表块的 PC 浏览器自适应属性设置,转成成新的操作界面后,属性配置怎么转换?

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

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

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

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

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

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

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

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

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

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

原因:新自适应尚未针对安卓电视等大屏设备进行专项适配与兼容

排查思路:

  • 安卓设备为移动端

URL 添加参数 force_web=true 进行 PC端 预览,与 h5端 预览进行对比,选择效果合适的进行使用。

  • 确认全屏操作时是否触发 resize

1)为 body 添加初始化后事件,确认 alert 弹窗是否可以在安卓电视的浏览器上触发。JavaScript 代码如下所示:

window.addEventListener('resize', () => {alert('触发')})

2)为 body 添加初始化后事件,获取宽高。JavaScript 代码如下所示:

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

3)删除 body 的初始化后事件。向 body 中添加一个文本控件,添加两个初始化后事件,分别打印初始化的尺寸以及全屏时的尺寸。

JavaScript 代码如下所示:

初始化事件1

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

初始化事件2

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

4)向 body 中添加一个按钮控件,添加点击事件。JavaScript 代码如下所示:

_g().getWidgetByName('body').resize(960, 540)

注:Javascript 语句中的数值为3)中获取的全屏尺寸数值。

全屏预览后点击按钮,手动触发 resize。若手动触发后界面正常充满,表明原先全屏操作未正确触发 resize 事件。

若手动触发 resize 后,模板充满屏幕。而原本问题的现象是点击全屏后没有充满,则说明原先的全屏并没有触发 resize 。

注:目前可通过在 body 中添加初始化后事件来暂时解决问题,考虑到电视端可能存在的全屏检测 API 兼容性问题,建议设置固定数值,如下所示:

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