华为折叠屏屏幕比例接近1:1，与一般的手机屏幕比例相差较大。一般android应用多基于16:9手机屏幕进行开发，在竖屏手机上显示效果最佳，而在折叠屏展开态未专门适配体验不好。最常见的问题是大图片大字体导致在折叠屏展开态应用显示内容变少。
针对webview页面的这一类问题我们提供了一种简单的应用重布局方案，通过集成js插件的形式，重排web布局，构建该应用在当前设备上的最佳显示比例，从而增加页面空间的利用率及优化用户的视觉体验。
|
说明：
新增特性 首次发布，提供WebUI自适应重排能力。欢迎广大开发者接入。 当前支持重排的布局类型有：单行元素（包含轮播图等特殊类型）、列表元素（包含瀑布流、侧边栏、宫格列表等特殊列表）、大图元素、大弹窗、大字体、通栏。 |
代码示例：
<script lang="javascript">
if (Ditto) {
Ditto.Main.start();
}
</script>
注意事项：
因为插件会修改viewport，所以必须运行在所有js之前。
设计示例：
参数配置
参数（可选） |
含义 |
_disableAutoLayout |
默认为false true：关闭自动重排 false（默认）：不关闭 |
_disableList _disableOneRow _disLargeImg |
默认为false. true：关闭多行列表/单行列表/大图的自动重排 false（默认）：不关闭 |
_viewportSwitch |
默认为1. 0：不修改viewport 1：修改viewport，处理大文字 2：修改viewport，处理通栏 3：修改viewport，处理大文字和通栏 |
_htmlFontSize |
默认为-1。不可随意配置，会出现异常。 设置的值为：网页在375px屏幕宽度下，html节点的字体大小 （为了防止rem异常） |
_oneRow _list _listItems _largeImg _disableLayout _gridList _cross _waterfall _changeMargins |
默认为空。 设置的值为：选择器字符串数组，例如[".class1"] 对选择器选中的元素进行强制 单行/多行/大图/不处理/宫格图/通栏/瀑布流/margin高度调整 类型的处理 |
_imgsLineWithTitle |
默认为true。 true（默认）：以图片为主的列表元素不处理 false：处理 |
_heightRate |
默认为不设置。 设置的值为：可以被识别成列表的最大高度比值 |
_heightHigh |
默认为不设置。 设置的值为：可以被识别成列表的最大高度 |
_widthDiff |
默认为不设置。 设置的值为：可以被识别成列表的最大宽度差值 |
_setFlex |
默认为true。 true（默认）：处理单行后设置flex属性平分间距 false：仅缩小 |
_widthHigh |
默认为不设置。 设置的值为：可以被识别成列表的最大宽度 |
_loadMoreClass |
默认为不设置。 设置的值为：瀑布流中【加载更多】元素的类名，如果瀑布流的加载依赖这个元素，则需要配置 |
_imgWidth |
默认为不设置。 设置的值为：可以被识别为图片的最小宽度，识别的图片会作为判断当前整个元素能否左右列表项的依据 |
_zoomScrollList |
默认为true。 true（默认）：处理纵向滚动列表 false：不处理 |
_listenViewport |
默认为false。 true：监听并修改新插入的meta viewport标签 false（默认）：不处理 |
_waterFallColumnCount |
默认为自动计算 设置的值为：瀑布流的列数 |
_forceCSS |
默认为空。 设置的值为：选择器与CSS属性的拼接字符串数组，[“选择器=>CSS属性:属性值;CSS属性:属性值”] 对选择器选中的元素强制生效特定的CSS属性 |
_changeAllMargins |
放大模式下有效，默认为true。 true（默认）：会自动修改margin-top、margin-bottom、padding-top、padding-bottom false：不会 |
_isNewsApp |
默认为false。 true：开启新闻类页面配置 false（默认）：不开启 |
_header |
默认为false。 true：开启顶栏处理 false（默认）：不开启 |
_nav |
默认为false。 true：开启导航栏处理 false（默认）：不开启 |
_remScale |
默认为空。 设置的值为：根节点字体缩小倍数 |
_ignoreChange |
默认为空。 设置的值为：元素的class 符合class的元素，其变动不监测 |
代码参考：
<script lang="javascript">
if (Ditto) {
Ditto.Main.start([
[
"",
{
_disableAutoLayout: false,
_viewportSwitch: 1,
_disableList: false,
_htmlFontSize: 40,
_list: [".hw_list"],
_zoomScrollList: true,
_waterFallColumnCount: 3,
_forceCSS: [".hw_list=>width:100px"],
_isNewsApp: false,
_ignoreChange: ["disable"],
},
],
]);
}
</script>
FAQ
1、关闭重排效果不理想的元素的方式？
建议使用disableLayout标签，直接关闭该元素重排，如下所示：
2、对特定元素使用特定重排规则的方式？
目前支持在class中添加如下标签以对特定元素触发特定的重排规则：
标签 |
含义 |
具体策略 |
hw_one_row |
单行 |
整行缩放为原来的一半 |
hw_list |
多行列表 父元素 |
打标元素为列表元素的父元素，所有子元素缩放为原来的一半，自动换行且左对齐 |
hw_list_item |
多行列表 子元素 |
打标元素为列表元素的父元素，所有子元素缩放为原来的一半，自动换行且左对齐 |
hw_large_img |
大图 |
缩放为原来的0.75，添加一个高斯模糊的背景 |
hw_grid_list |
宫格列表 |
整行缩放为原来的0.75，居中 |
hw_waterfall |
瀑布流 |
打标元素为列表元素的父元素，所有子元素缩放为原来的一半，位置按照瀑布流自动排列 |
hw_cross |
通栏 |
拉长并缩放为原来的一半 |
dis_layout |
关闭重排 |
禁止对此元素以及此元素的祖先和子孙元素做重排 |