目录

折叠屏展开态和折叠态下呈现的内容不一致

问题现象

折叠屏展开态和折叠态打开同一页面时，展开态部分内容缺失。

背景知识

Web：提供具有网页显示能力的Web组件。在Web开发中，使用@media实现自适应布局是响应式设计的核心技术，主要通过媒体查询动态调整样式以适应不同设备屏幕。
使用DevTools工具调试前端页面：Web组件支持使用DevTools工具调试前端页面。DevTools是Web前端开发调试工具，支持在电脑上调试移动设备前端页面。

问题定位

使用DevEco Testing查看页面布局，发现该页面使用了Web组件。

使用开发者工具或DevTools查看Web页面布局，发现在折叠态尺寸下，使用了@media自适应布局，示例代码如下：
```
@media (min-device-width: 320px) and (max-width: 689px), (max-device-width: 480px) {
  .w1200 {
    width: 100%;
  }
}
```
在展开态尺寸下，使用了固定布局，示例代码如下：
```
.w1200 {
  width: 1200px;
  margin: 0 auto;
}
```

分析结论

当前Web页面在折叠屏展开态下，使用了固定布局，使部分页面被遮挡，导致与折叠态呈现的内容不一致。

修改建议

在折叠屏展开态尺寸下，使用@media媒体查询响应式布局，具体可参考官方示例。