CSS移动端适配方案详解

本文聚焦于如何用最精简、高效的CSS手段为缺乏响应式的老旧网站实现移动端“急救式”适配，强调三大不可妥协的核心操作：必须在head最前端正确添加viewport meta标签（width=device-width, initial-scale=1），用max-width:100%替代width:100%消除横向滚动条，以及为img和iframe统一设置max-width:100%; height:auto确保内容自适应缩放；同时提醒避开常见陷阱——如禁用缩放、硬编码像素宽度、滥用媒体查询或强行重排陈旧HTML结构，主张优先定位真实溢出问题、小步迭代，让老站在不推倒重做的前提下快速获得可用的移动体验。

viewport meta 标签必须加，且不能写错

旧网站没响应式，最直接的“急救”是让移动端浏览器别自动缩放。不加或写错 viewport，iOS Safari 和安卓 Chrome 会按桌面宽度渲染，文字小到看不清，点击区域错位。

• 是底线，缺一不可；width=device-width 告诉浏览器用设备真实宽度，initial-scale=1 阻止默认缩放
• 别写成 width=320 或 user-scalable=no——前者锁死宽度，后者禁掉用户双指缩放，违反可访问性
• 确保它出现在 最前面，某些旧 CMS（如早期 WordPress 插件）可能在它前面注入其他 meta，导致失效

用 max-width 替代 width:100% 防止横向滚动条

老代码里大量 width: 100% 在窄屏下常撑破视口，触发横向滚动。这不是 bug，是 CSS 盒模型对 padding/border 的默认处理方式。

• 把关键容器（比如 #wrapper、.container）的 width 改成 max-width: 100%，再配 box-sizing: border-box
• 避免给 body 或 html 设 width: 100% —— 它们本该撑满，强行设反而干扰 viewport 行为
• 检查是否有固定像素宽的元素（如 width: 960px 的 div），它们是横向滚动元凶，优先用 max-width: 100% + margin: 0 auto 替代

图片和 iframe 必须加 responsive 声明

旧站里 和