移动端 Web 与响应式布局：从 WAP 时代到内容优先

WAP/WML 是早期移动网络的历史背景，不是今天开发手机网站的默认方案。现代移动浏览器使用 HTML、CSS 和 JavaScript；多数产品可用同一 URL 与响应式布局适配手机、平板和桌面。确有信息架构或性能隔离需求时，再考虑独立站点或原生应用。

设置 viewport 并保留缩放

移动浏览器依据 viewport 元数据建立布局视口。缺少配置时，浏览器可能用较宽的虚拟视口缩小页面，媒体查询和文字显示都不符合预期。

<meta name="viewport" content="width=device-width, initial-scale=1">

不要用 user-scalable=no 或极低的缩放上限“修复”页面，这会阻碍低视力用户放大。修复横向溢出要找到固定宽度、长 URL、表格或图片的真实原因。系统大字体、浏览器缩放、竖屏和软键盘也都要测试。

内容优先设断点

断点应由内容何时放不下决定，而不是照抄某款手机型号。先确保狭窄视口下信息和操作成立，再在空间足够时增强布局。Grid/Flexbox、相对单位、minmax()、clamp() 和容器查询能减少硬编码尺寸。

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

@media (min-width: 52rem) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

.article-content {
  min-width: 0;
  overflow-wrap: anywhere;
}

img,
video {
  max-width: 100%;
  height: auto;
}

导航可折叠，表格应局部滚动或转成有标签的行，代码块可横向滚动，长标题和 URL 应合理断行。触屏目标有间距和明确激活状态；焦点路径不能靠 hover 才出现。

图片按设备选择

只设 width: 100% 会缩小展示，却仍可能下载原始大图。srcset 与 sizes 让浏览器依据布局宽度和像素密度选择候选资源；<picture> 可选择格式或不同构图。声明图像宽高或 aspect-ratio，避免加载后布局偏移。首屏关键图不应一律懒加载，屏外图才适合延迟加载。

<img
  src="/images/diagram-960.webp"
  srcset="/images/diagram-480.webp 480w,
          /images/diagram-960.webp 960w,
          /images/diagram-1600.webp 1600w"
  sizes="(min-width: 52rem) 48rem, 100vw"
  width="960"
  height="600"
  alt="浏览器跨标签通信流程图">

alt 应表达图片对当前上下文的意义。装饰图片用空 alt；复杂图示还应在正文提供文字说明，不能只靠颜色或像素信息传达内容。

不要猜 User-Agent

User-Agent 可能缩减、伪装或变化，设备型号也不能说明当下视口和输入方式。样式用媒体查询，布局按容器空间决定；只有服务端内容或能力确需不同，才使用经过验证的能力检测/Client Hints，并正确处理缓存变体。特性检测通常比设备型号分支稳定。

跨设备验收清单

1. 测 320、360、390、768、1024 像素附近与宽屏，不只测试自己的设备。
2. 检查横竖屏、200% 缩放、大字体、软键盘和浏览器翻译。
3. 验证长标题、代码、表格、媒体、弹窗与导航的溢出和焦点路径。
4. 在慢网络和高像素密度屏幕检查图片下载、布局稳定与首屏资源。
5. 用真实 iOS Safari、Android Chrome 测触摸、文件选择、视频和登录表单。

参考：MDN Responsive Design、MDN Media queries、MDN viewport、MDN responsive images、web.dev responsive design。