# 网页检查报告

检查对象：`案例-花店落地页/index.html`
检查时间：2026/10/29 22:03
检查宽度：1440 / 768 / 390 px
扫描源码：1 个文件
实际运行了 24 / 29 项检查，另有 5 项不适用（导出 4 项：页面没有导出/下载按钮；交互 1 项：页面没有数字输入框），不算失败也没有检查
退出码：1（有必须修的问题，先修完再重跑）

## 一句话结论

**查出 2 个问题，其中 1 个必须修。** 先把必须修的改完，再重跑一次。

### 必须修（不修不能交）

- **390px 下页面可以左右拖动** —— 实测：390px 视口下内容宽 464px（多出 74px）。
  证据：超出的元素（390px）：article.card 右边界 464px、h3 右边界 439px、p 右边界 439px、article.card 右边界 464px、h3 右边界 439px

### 你需要自己做的 2 件事

这些是脚本查不到的，必须你亲手看一眼。每件只要一分钟。

1. **用手机实际打开一次**：不是模拟，是真机。重点看按钮能不能点、文字要不要放大才看得清、有没有内容被切掉。
2. **文案与功能是否一致**：把页面上「免费」「无需登录」「本地处理」「不上传」这类承诺圈出来，逐条试一次是不是真的。

### 导出文件实测

不适用：页面没有导出/下载按钮。导出相关的 4 项（E-01–E-04）因此没有运行——既不算检查失败，也不能说检查过导出。

---

## 给 AI 的完整数据

下面这部分是给 AI 改代码用的，人可以跳过。

### 布局

#### [P1] R-01 390px 下页面可以左右拖动

实测：390px 视口下内容宽 464px（多出 74px）。手机上表现就是右侧内容被切掉，用户必须横向拖才能看到。

证据：
```
超出的元素（390px）：article.card 右边界 464px、h3 右边界 439px、p 右边界 439px、article.card 右边界 464px、h3 右边界 439px
```
修复要求：把固定的 width 改成 max-width + width:100%；网格用 auto-fit/minmax 替代固定列宽

### 可访问性

#### [P2] R-03 1 个背景图元素没有可读名称

元素用 background-image 承载画面内容，但没有 aria-label 也没有 role="img"，读屏完全听不到这块内容。

证据：
```
实测命中 1 个
```
修复要求：加 role="img" 和 aria-label，描述画面内容

### 建议（不阻断交付）

- **1 个可点区域偏小** —— 在 390px 下实测，宽高都小于 40px：花束(28×18)（点击热区建议不小于 44×44px；视觉上可以小，用 padding 撑开热区）

### 渲染实测数据

| 宽度 | 视口 | 内容宽 | 横向溢出 | 图片 | 缺 alt | 链接 | 按钮 | 输入框 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 1440 | 1440 | 1440 | 否 | 0 | 0 | 4 | 0 | 0 |
| 768 | 768 | 768 | 否 | 0 | 0 | 4 | 0 | 0 |
| 390 | 390 | 464 | **是** | 0 | 0 | 4 | 0 | 0 |

### 未能检查

- 真实手机上的表现（本报告全部是桌面浏览器调整视口得出的）
- Safari 与 Firefox（只用 Chromium 内核跑过）
- 读屏软件的实际朗读效果（只验证了属性存在）

---

本报告只覆盖上面列出的检查项。没查的项目不代表没问题。