要让网站适配手机，需要添加正确的 viewport meta 标签，让布局随屏幕宽度伸缩而不是使用固定像素宽度，用媒体查询在小屏幕上重新排列内容，让文字易读、按钮易点，并为手机提供合适尺寸的图片。然后在真实的手机视图中测试。下面这十项修改覆盖了几乎所有未适配移动端的网站会犯的错误，并按处理顺序排列。
1. 添加 viewport meta 标签
没有它，手机会认为页面是为桌面设计的，先按约 980px 宽渲染，再整体缩小。文字会变得很小，用户只能用手指放大。在每个页面的 <head> 中加入：
<meta name="viewport" content="width=device-width, initial-scale=1">不要添加 user-scalable=no 或 maximum-scale=1，禁止缩放会给需要大字的人带来困难。详见 viewport meta 标签详解。
2. 把固定宽度换成流式宽度
width: 960px 的容器放不进 390px 宽的屏幕。请改用百分比、max-width 和现代布局工具：
.container {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}使用 flex-wrap: wrap 的 Flexbox，以及使用 repeat(auto-fit, minmax(16rem, 1fr)) 的 CSS Grid，可以让列自动换行，很多时候根本不需要媒体查询。
3. 让图片和嵌入内容可以缩小
img, video, iframe {
max-width: 100%;
height: auto;
}对于嵌入的视频和地图，设置 aspect-ratio: 16 / 9; width: 100%，让它们按比例缩放而不破坏布局。仅这一条规则就能消除很多横向滚动问题。
4. 用媒体查询重新排列内容
有些布局不只是缩小，而是需要改变结构：侧边栏移到正文下方，四列的页脚变成一列。先写移动端布局，再为宽屏增加复杂度：
.layout { display: grid; gap: 2rem; }
@media (min-width: 64rem) {
.layout { grid-template-columns: 3fr 1fr; }
}如何选择宽度见响应式断点指南，语法见 CSS 媒体查询详解，移动优先的思路本身见移动优先设计。
5. 使用易读的字体
正文字号至少 16px（大多数浏览器中为 1rem），行高约 1.5。使用 rem 单位，让文字遵循用户在浏览器中的字号设置。在大屏上给文本块设置 max-width: 65ch，保持舒适的行长。标题可以用 clamp() 随屏幕缩放：
h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }6. 让点击区域足够大、间距足够宽
手指远不如鼠标指针精确。WCAG 2.2 规定目标的最小尺寸为 24 × 24 CSS 像素；Apple 和 Google 的设计规范建议约 44–48px，点按起来才舒适。为文中链接和图标按钮留出足够的内边距，并与相邻元素保持间隔。
7. 做一个不依赖悬停的导航
触屏上没有悬停。在小屏幕上，使用点击后展开列表的菜单按钮，控制一级菜单项的数量，并确保子菜单既能点击展开，也能用键盘展开。测试选择链接后菜单是否会自动关闭。
8. 让表单适合手机
- 使用正确的输入类型（
email、tel、url、number）和inputmode，让手机弹出对应的键盘。 - 添加
autocomplete属性（name、email、street-address、cc-number），让自动填充生效。 - 输入框文字保持在 16px 及以上；iOS Safari 在聚焦字号更小的输入框时会自动放大页面。
- 在窄屏上把标签放在输入框上方，并让提交按钮占满整行。
9. 为移动端提供合适尺寸的图片
一张 2400px 宽的头图，对手机来说是很大的下载量。使用响应式图片，让浏览器自己选择合适的文件：
<img src="hero-800.jpg"
srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(min-width: 64rem) 50vw, 100vw"
alt="手机上显示的产品仪表盘">WebP 和 AVIF 等现代格式可以进一步减小文件体积。首屏以下的图片加上 loading="lazy"。页面提速的方法见移动端页面速度测试指南。
10. 去掉移动端的干扰元素
一进页面就弹出的全屏弹窗、盖住“购买”按钮的聊天气泡、占掉四分之一屏幕的吸顶栏，都会让网站在手机上显得很不友好。延迟弹窗出现时间，让它们容易关闭，并保持吸顶元素小巧。
如何检查效果
每次修改后，都在手机尺寸下看看页面。最快的方法是在桌面版 Chrome 中使用手机视图：DevTools 设备模式，或者像 Mobile View Extension 这样的一键插件，它会用真实的移动 User Agent 重新加载标签页，还能对比不同设备尺寸。然后运行 Lighthouse 移动端审计，上线前再过一遍移动端网页测试清单。可以替代 Google 旧版一键测试的工具，见移动设备友好性测试的替代工具。
用的是 WordPress？原则相同，但大部分修改要在主题中完成。见 WordPress 网站移动端适配。
常见问题
让旧网站适配移动端，最快的方法是什么？
添加 viewport meta 标签，给图片和嵌入内容设置 max-width: 100%，去掉主要容器的固定宽度，再用一个媒体查询把多列改成纵向堆叠。这样一个下午就能解决大部分横向滚动和文字过小的问题。
需要单独做一个手机版网站吗？
不需要。一个能随屏幕自适应的响应式网站更容易维护，也是 Google 推荐的做法。单独的 m. 站点是过时的方案。
怎么知道我的网站是否适配了移动端？
在手机尺寸下查看页面，以移动模式运行 Lighthouse 审计，再查看 Google Search Console 网址检查中的截图。这三者结合起来，可以替代 Google 已下线的移动设备友好性测试。