1.8 KiB
1.8 KiB
门户移动端适配验证清单
覆盖范围
- 全局：
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 文件以媒体查询注入，桌面端默认样式优先级保持不变。