免费移动端适配检查工具
在真实浏览器中以手机、平板和桌面尺寸打开您的页面，了解它是否针对移动屏幕进行了设置：viewport 标签是否正确、用户能否缩放，以及哪些元素超出屏幕边缘、迫使访客横向滚动。
此工具检查什么
Viewport 标签
页面是否有 viewport meta 标签、是否使用 width=device-width，以及是否通过 user-scalable=no 或低于 2 的 maximum-scale 禁止缩放。
比屏幕更宽的内容
在每个尺寸下页面是否比设备更宽（以真实屏幕宽度为准），并列出最多五个超出的元素及超出多少。
三种屏幕尺寸
手机（375×667）、平板（768×1024）和桌面（1440×900），其中手机和平板视图会模拟移动浏览器。
截图
手机首屏截图，以及任何发现问题的尺寸的截图。
加载问题
页面在任一尺寸下是否加载失败或超时。
检查的工作原理
我们在 Chromium 中加载您的页面三次 — 每个屏幕尺寸一次 — 等待加载完成，然后将页面宽度与真实设备宽度比较，并在有帮助时截图。移动浏览器会悄悄加宽布局以容纳过宽的内容，因此我们以设备宽度为准进行测量，而不是浏览器自身的视口，否则问题会被掩盖。
评分从 100 分开始：缺少 viewport 标签扣 20 分，viewport 未设置 width=device-width 扣 10 分，viewport 禁止缩放扣 5 分，每个出现横向溢出的屏幕尺寸扣 15 分，加载问题扣 10 分。
这项快速检查不测量点按目标大小、文字大小或元素重叠。登录用户可以在多种手机、平板和桌面配置上运行更深入的布局测试，还会查找因字号过小而导致手机自动放大的表单字段，以及超出屏幕的导航。
您将看到的证据
对于每个屏幕尺寸，您会看到它是否通过以及我们测得的页面宽度。溢出发现会指出超出的元素（其 CSS 选择器及其宽度与屏幕宽度的对比），viewport 发现会原样引用您的标签，截图则展示问题的实际样子。
此工具不检查的内容
真实手机和所有浏览器
它使用带移动端模拟的 Chromium。iPhone 上的 Safari 和较老的 Android 浏览器仍可能表现不同。
点按目标、文字大小和重叠
按钮过小、文字太小难以阅读以及元素相互遮挡，需要使用深入布局测试或人工查看。
移动端速度
手机上的加载速度由速度检测工具测量，而不是这里。
菜单和交互
不会点按或打开任何内容，因此不会试用菜单、弹窗和表单。
我们常发现的问题
没有 viewport 标签，或标签禁止缩放
较老的网站常常没有 viewport 标签，导致手机显示缩小的桌面页面；还有一些设置了 user-scalable=no，使视力不佳的人无法放大。
固定宽度的元素
容器、表格或嵌入内容设置了比手机屏幕更宽的固定像素宽度。
不会缩小的图片和视频
没有设置 max-width: 100% 的媒体，把页面撑得比屏幕更宽。
过宽的表格
列数很多的价格表或对比表。
无法断行的长文本
无法换到下一行的长 URL、电子邮件地址或代码。
如何修复
修正 viewport 标签
在页面 head 中加入 '<'meta name="viewport" content="width=device-width, initial-scale=1">，并移除 user-scalable=no 和 maximum-scale=1。
使用弹性宽度
用 max-width 和百分比替换固定像素宽度，并使用 CSS grid 或 flexbox，让布局在小屏幕上自动换行。
让媒体缩小以适应屏幕
在 CSS 中为图片、视频和 iframe 设置 max-width: 100% 和 height: auto。
让宽表格在自己的区域内滚动
把表格放进设置了 overflow-x: auto 的容器中，或在小屏幕上将列堆叠显示。
允许长单词断行
对可能包含长 URL 的文本区域使用 overflow-wrap: anywhere。
常见问题
它会在真实手机上测试吗？
不会。它使用设置为手机和平板屏幕尺寸并开启移动端模拟的真实 Chromium 浏览器。这能可靠地发现布局问题，但并不与每一款手机和浏览器完全相同，尤其是 iPhone 上的 Safari。
这和 Google 的移动设备适合性测试一样吗？
不一样。Google 已于 2023 年停用其独立的移动设备适合性测试。我们的检查关注导致移动端布局不佳的两个最常见原因 — 缺少 viewport 标签和内容比屏幕更宽 — 并向您展示截图。
为什么不是每个尺寸都有截图？
我们只保留手机视图以及有问题的尺寸的截图，让报告只展示重要内容。截图只拍摄首屏，但溢出检查会测量整个页面的宽度。
它会检查我的网站在手机上的速度吗？
不会。请使用速度检测工具 — Lighthouse 默认会模拟使用移动网络的中端手机。
我的评分是 100。我的网站在手机上完美无缺吗？
这表示页面有正确的 viewport 标签并允许缩放，而且在我们测试的三个尺寸下没有内容超出屏幕。按钮太小难以点按、文字太小难以阅读等问题需要进一步查看，或使用登录用户可用的深入布局测试。