57 lines
1.8 KiB
Markdown
57 lines
1.8 KiB
Markdown
# 门户移动端适配验证清单
|
||
|
||
## 覆盖范围
|
||
|
||
- 全局：`styles/mobile-adaptation.less`、`styles/breakpoints.less`、`styles/page-layout.less`
|
||
- 入口：`main.js`（`mobile-adaptation.less` + `v-lazy` + `utils/breakpoint.js`）
|
||
- 布局：`main.vue` 移动端 `content-wrap` 高度策略、`app.vue` 移除全局 scale
|
||
- 视口：`public/index.html`
|
||
- 主要页面：首页 home2、服务中心 fwsc、共性能力 gxnlpt、企业出海 qych
|
||
|
||
## 建议模拟尺寸（至少 3 种）
|
||
|
||
| 设备参考 | 宽度 | 高度（示例） |
|
||
|----------|------|----------------|
|
||
| iPhone SE | 320px | 568px |
|
||
| iPhone 14 | 390px | 844px |
|
||
| 大屏 Android | 414px | 896px |
|
||
| 上限区间 | 480px | 854px |
|
||
|
||
Chrome DevTools：Toggle device toolbar → 分别设置上述宽度刷新。
|
||
|
||
## 验证项
|
||
|
||
### 布局
|
||
|
||
- [ ] 无横向滚动条（除刻意横向滚动的 Tab 条）
|
||
- [ ] 导航汉堡菜单可打开/关闭，菜单项可点击
|
||
- [ ] 页脚链接可点击且不重叠
|
||
|
||
### 交互
|
||
|
||
- [ ] 主要按钮、链接触控区域 ≥ 48×48px
|
||
- [ ] 表单输入聚焦时页面不异常缩放（iOS）
|
||
- [ ] 共性能力收录表单可完整填写并提交
|
||
|
||
### 功能页面
|
||
|
||
- [ ] 首页各区块纵向可读，无内容被裁切
|
||
- [ ] 服务中心四宫格在 ≤480px 为单列
|
||
- [ ] 碳服务市场列表与筛选在窄屏上下堆叠
|
||
- [ ] 共性能力侧栏与卡片单列展示
|
||
- [ ] 企业出海三法案区块标题与卡片正常
|
||
|
||
### 性能
|
||
|
||
- [ ] 首屏外图片使用 `v-lazy` 或 `loading="lazy"` 时不阻塞首屏
|
||
- [ ] 弱网下列表页可正常滚动
|
||
|
||
### 桌面回归
|
||
|
||
- [ ] 宽度 ≥1280px 时导航横栏、版心 1200px 布局与改版前一致
|
||
- [ ] 无多余留白或组件错位
|
||
|
||
## 备注
|
||
|
||
移动端样式通过独立 LESS 文件以媒体查询注入，桌面端默认样式优先级保持不变。
|