# 三折叠设备未适配，页面出现错乱、重叠、拉伸、截断等异常情况

#### 问题现象

应用在三折叠设备的单屏态（F态）、双屏态（M态）和三屏态（G态）上运行时，会出现内容显示异常的现象。

#### 背景知识

*   三折叠屏幕规格信息：三折叠在单屏态、双屏态和三屏态下的硬件参数。
*   一多断点开发：响应式布局中最常使用的特征是窗口宽度及窗口高宽比，可以将窗口宽度及窗口高宽比划分为不同的范围，称之为“断点”。当窗口宽度及窗口高宽比从一个断点变化到另一个断点时，改变页面布局（如将页面内容从单列排布调整为双列排布甚至三列排布等）以获得更好的显示效果。

#### 问题定位

*   当应用在折叠屏上布局异常时，建议检查代码中是否已通过getWindowWidthBreakpoint()与getWindowHeightBreakpoint()获取当前窗口横向断点与纵向断点。
*   检查代码中有没有通过on('windowSizeChange')方法监听窗口尺寸变化。
*   检查应用有没有在接收到on('windowSizeChange')事件后能够及时更新布局的断点，在页面中，获取并及时使用更新后的断点。
*   检查应用是否通过不同的断点调整布局参数以适应新的屏幕尺寸。

#### 分析结论

应用没有通过getWindowWidthBreakpoint()与getWindowHeightBreakpoint()获取当前窗口横向断点与纵向断点。未通过on('windowSizeChange')方法监听窗口尺寸变化，并在监听回调中重新获取断点，及时更新页面布局，导致页面显示异常。

#### 修改建议

建议参照官方示例实现断点触发的UI刷新，具体步骤如下：

1.  通过getWindowWidthBreakpoint()与getWindowHeightBreakpoint()获取当前窗口横向断点与纵向断点。
2.  将窗口断点信息保存在自定义窗口信息类WindowInfo对象中，并存储在AppStorage以同步刷新UI布局。
3.  通过on('windowSizeChange')方法监听窗口尺寸变化，并在监听回调中重新获取断点，以达到窗口尺寸变化依旧有良好的体验。
4.  根据AppStorage中存储的窗口信息，对不同断点区间进行针对性布局。