移动端与响应式
如何让网站适配移动端：12 个行之有效的步骤
超过一半的网络流量来自移动设备，而 Google 会优先索引网站的移动版本。这 12 个步骤能让任何网站适配移动端，并告诉你如何免费测试。
本页内容
适配移动端的网站，是指在手机上易读、好用的网站：文字不用缩放就能看清，按钮容易点中，没有任何内容横向溢出屏幕，页面在移动网络下也能快速加载。这一点如今比以往任何时候都重要：大部分网络流量来自手机，而 Google 采用移动优先索引，也就是说，它根据网站的移动版本来决定排名。
好消息是，移动端适配早已有成熟的解决办法。下面的 12 个步骤几乎涵盖了所有问题，之后还会介绍如何免费在真实设备尺寸上测试你的网站。
你的网站适配移动端了吗？
免费审核一次：Rudra 会在它抓取的每个页面上检查 viewport 标签和常见的移动端性能问题。
1. 添加 viewport meta 标签
没有它，手机会按桌面宽度渲染页面再整体缩小，所有内容都会变得很小。请把下面这行放进每个页面的 <head> 中：<meta name="viewport" content="width=device-width, initial-scale=1">。不要用 user-scalable=no 禁用缩放，那属于无障碍缺陷。
2. 采用移动优先的响应式布局
先为最小的屏幕做设计，再用 CSS 媒体查询（@media (min-width: 768px)）为更大的屏幕逐步增加复杂度。用 CSS Flexbox 和 Grid 代替固定宽度的分栏，并在手机上把多栏布局堆叠成单栏。
3. 使用弹性宽度，而不是固定像素
把 width: 960px 换成 max-width: 960px; width: 100%。容器使用相对单位（%、rem、vw），并避免出现比屏幕还宽的元素，它们会导致横向滚动，这是最常见的移动端布局问题。
4. 让图片和媒体自适应
在 CSS 中加入 img, video { max-width: 100%; height: auto; }。用 srcset 和 sizes 为手机提供更小的图片，使用现代格式（WebP、AVIF），并且始终设置 width 和 height 属性，这样图片加载时布局就不会跳动。
5. 使用易读的字号
移动端的正文字号至少应为 16 px，行高在 1.5 左右。每行的长度要适中，并确保文字达到 WCAG 的对比度要求：字小、对比度又低的文字，在户外用手机看会非常吃力。
6. 让按钮和链接容易点中
点击目标至少应为 48 × 48 px，彼此之间留出约 8 px 的间距。页脚或菜单里挤在一起的小链接，是最常见的移动端易用性问题之一。
7. 简化导航
把冗长的菜单收进一个标注清晰的菜单按钮，让最重要的操作（搜索、购物车、联系方式）始终可见，并避免只能靠悬停触发的交互，因为触摸屏上没有悬停。
8. 避免干扰性弹窗
在移动端遮住内容的全屏插页式广告会惹恼用户，还可能损害排名。改用小横幅，并把关闭按钮做得够大、容易点到。
9. 针对移动端优化表单
使用正确的输入类型（type="email"、type="tel"、inputmode="numeric"），让手机弹出合适的键盘；用 autocomplete 启用自动填充；表单尽量简短；标签放在字段上方，而不是旁边。
10. 提升移动端性能
手机的 CPU 和网络都更慢。压缩图片并使用懒加载，压缩并延迟加载 JavaScript，移除未使用的 CSS，使用 CDN 并启用缓存。目标是让 Core Web Vitals 处于“良好”范围：LCP 低于 2.5 s、CLS 低于 0.1、INP 低于 200 ms。真实用户数据可以在 Google Search Console 或 PageSpeed Insights 中查看。免费网站审核会标出常见原因，例如服务器响应慢、阻塞渲染的资源以及未设置尺寸的图片；修复方法请参阅我的网站为什么这么慢。
11. 让移动端和桌面端的内容保持一致
在移动优先索引下，移动端被隐藏或删掉的内容可能根本不会被索引。两个版本要保留相同的标题、正文、结构化数据、图片（含 alt 文本）和 meta 标签。
12. 在真实设备尺寸上测试，并且要定期测试
只是拖动缩小桌面浏览器的窗口是不够的。要在真实的手机和平板视口上测试，横屏竖屏都要看，并且在每次重大改动之后重新测试。大多数“已适配移动端”的网站，正是在这里悄悄出了问题。
如何测试网站是否适配移动端
Rudra 的响应式布局审核会在最多八种设备配置上渲染你的页面，包括 iPhone SE、iPhone 14、Pixel 7、iPad、iPad Pro 和三种桌面尺寸，并标出溢出或重叠的内容，每种设备都附有截图。把它与整站扫描结合起来，还能一并发现移动端的性能和 SEO 问题：
- 对首页运行一次免费网站审核，抓取整个网站。
- 打开报告，查看 SEO、性能和无障碍方面的发现。
- 运行响应式布局审核，查看页面在各种设备上的样子；如果只想快速检查单个页面，可以使用免费的移动端检测工具。
- 修复被标出的问题，然后重新扫描并对比结果。
免费测试网站的移动端表现
输入你的网址，审核页面在移动端、性能和 SEO 方面的问题。
常见问题
怎样才算适配移动端的网站？
适配移动端的网站具备以下几点：有 viewport meta 标签；采用响应式布局，能适应任何屏幕且不出现横向滚动；文字易读，字号至少 16 px；点击目标至少 48 × 48 px；在移动网络下加载迅速；内容与桌面版一致。
如何检查我的网站是否适配移动端？
在真实的手机和平板视口上渲染你的页面，检查是否存在内容溢出、文字过小、点击目标过小和加载缓慢的问题。Rudra 的响应式布局审核会在最多八种设备配置上渲染页面，并标出溢出或重叠的内容；真实用户的速度数据可以在 Google Search Console 中查看。
移动端适配会影响 SEO 吗？
会。Google 采用移动优先索引，因此它抓取并用于排名的是页面的移动版本。移动端易用性差、移动端 Core Web Vitals 表现慢，都可能拉低你的排名。
不重建网站，能让现有网站适配移动端吗？
通常可以。添加 viewport 标签、让图片自适应、把固定宽度换成相对宽度，再加上媒体查询，就能解决大多数网站的问题，无需彻底改版。