外贸网站移动端适配的结论是:先修首屏、表单、图片这 3 处,再考虑整体重做。360 px 宽的屏幕上,这 3 处决定访客还愿不愿意往下看,也决定询盘表单会不会被填完。
核心结论
移动端适配不是把桌面版等比缩小,而是按手机的真实约束重排信息:一屏只讲一件事,一次只填必要字段,一张图不超过一屏高。三项达标,多数外贸站不必重做模板,在样式层改就能上线。
为什么手机端的首屏最先出问题?
因为可用高度比桌面小得多。360×640 的视口扣掉地址栏与浏览器工具栏,实际可用高度通常只剩 500–560 px,桌面端能并排放下的轮播、标语与按钮,在手机上会被挤到第二屏之外。
NN/g 研究员 Raluca Budiu 把移动端的固有限制概括为「小屏、短会话、单窗口,以及不稳定的网络」。小屏是第一位的,它决定了信息必须按优先级排队,而不是平铺。
「首屏不是海报,是路口:访客要在 3 秒内判断这里有没有他要的东西。」这是微功夫前端负责人在移动端评审会上说得最多的一句话。评审时只认一条硬标准:不滚动,也要能读到一句业务定义和一个主行动按钮。
首屏信息顺序的完整拆解,见 外贸网站首页怎么设计。
表单在窄屏上最容易丢在哪一步?
丢在输入环节,不是字段数量。手机键盘会顶起近半屏,输入类型设错就会弹出错误的键盘:邮箱字段没有 @ 键,电话字段能输入汉字,国家字段要手动打全称。
这不是审美问题,是可测的转化问题。NN/g 的表单可用性研究 给出的结论是,遵循基础可用性准则的表单首次提交成功率 78%,违反的只有 42%(数据来源:Nielsen Norman Group 2016 年表单可用性研究)。
- 输入类型:邮箱用 type="email",电话用 type="tel",国家用下拉而不是文本框
- 字段数量:询盘表只保留姓名、邮箱、需求 3 项,其余后置到邮件往来
- 错误提示:写在字段下方,不用弹窗,不整页刷新
- 提交按钮:全宽,与上一个字段间距 ≥ 16 px,减少误触
字段与必填项的取舍在 询盘表单设计 里有逐项对照,手机端只多一条差异:桌面端能容忍的 8 个字段,手机上通常只该留 3 至 5 个。
图片、字号与点击区怎么定标准?
这三项都有可量化的下限,写进验收表比口头要求有效,也方便交给前端逐条核对。

| 项目 | 手机端做法 | 验收口径 |
|---|---|---|
| 首屏主图 | 导出 WebP,宽度 ≤ 1200 px | 单图体积 ≤ 150 KB |
| 正文配图 | 写死 width/height,加懒加载 | 布局不跳动,CLS < 0.1 |
| 正文字号 | 16 px 起,行高 1.6 | 输入框不触发自动放大 |
| 按钮与链接 | 点击区 ≥ 24×24 CSS px | 相邻按钮间距 ≥ 8 px |
W3C 在 WCAG 2.2 的第 2.5.8 条里把指针目标下限定为 24×24 CSS 像素(AA 级),低于这个尺寸的按钮在拇指操作下误触明显上升,WCAG 2.2 目标尺寸条款 就是这条验收线的出处。
字号取 16 px 还有一个现实原因:iOS Safari 在输入框字号小于 16 px 时会自动放大页面,用户点一下就要手动缩回去。图片则直接连着速度,正文图按 2 倍图导出再压到 150 KB 以内,具体做法见 外贸网站打开速度优化。
整体重做还是只改样式层?
| 改法 | 适用情况 | 工期与风险 |
|---|---|---|
| 只改样式层 | 桌面版结构合理,只是缺响应式断点 | 1–2 周,风险最低 |
| 换模板 | 模板本身不支持响应式,栏目 ≤ 5 个 | 3–4 周,需重做 301 映射 |
| 重做站点 | 信息架构与产品分类同时要改 | 2–3 个月,需并行做内容迁移 |
外贸网站移动端适配的改法判断顺序是先看结构、再看模板。桌面版把产品参数、认证与应用场景排得清楚,通常只缺断点与图片规格,改样式层就够;要动模板或重做,务必先做 301 映射,外贸网站改版注意事项 里有一份可直接用的上线检查表。
外贸网站移动端适配的执行顺序
- 用真机过 360 px、390 px、414 px 三个宽度,不用浏览器模拟器代替
- 先改首屏:删轮播、压标题、把主按钮提到第一屏内
- 再改表单:字段减到 5 个以内,补输入类型与行内错误提示
- 最后压图片、定字号与点击区,全站回归一遍
边界也要说清:后台管理页、复杂产品配置器、需要横向比对的大表格,在手机上做「可用」比做「好用」现实,这类页面优先保证能读、能提交,不追求一屏完成。
外贸网站移动端适配做到什么程度,最终由询盘路径上的漏斗决定,而不是由设计稿的完整度决定。栏目整体思路见 外贸建站 的流程拆解。