免费移动端适配检查工具
在真实浏览器中以电脑、平板和手机尺寸打开您的页面，查看每种尺寸的截图，并了解页面是否已针对移动屏幕进行设置，还是会溢出屏幕、让访客不得不横向滚动。
此工具检查什么
Viewport 标签
页面是否有 viewport meta 标签。没有它，手机会显示缩小的电脑版布局，文字非常小。
比屏幕更宽的内容
在每种尺寸下页面是否比屏幕更宽，这会导致横向滚动和内容被截断。
三种屏幕尺寸
电脑（1280×800）、平板（768×1024）和手机（390×844），其中平板和手机视图会模拟移动浏览器。
截图
每种尺寸下首屏的截图，让您看到访客看到的画面。
加载问题
页面在任一尺寸下是否加载失败或超时。
检查的工作原理
我们在 Chromium 中加载您的页面三次 — 每种屏幕尺寸一次 — 等待加载完成后，测量页面是否比屏幕更宽并截图。平板和手机视图使用带高密度显示屏的移动端模拟。
评分从 100 分开始：缺少 viewport 标签扣 20 分，每种出现横向溢出的屏幕尺寸扣 15 分，出现加载问题扣 10 分。
此项快速检查不测量点按目标大小、字号或元素重叠。已登录用户可以在最多八种设备配置上运行更深入的布局测试，该测试也会查找这些问题。
我们常发现的问题
没有 viewport 标签
在较旧的网站和手工编写的页面上很常见；手机视图看起来就像缩小的电脑页面。
固定宽度的元素
容器、表格或嵌入内容设置了比手机屏幕更宽的固定像素宽度。
不会缩小的图片和视频
没有设置 max-width: 100% 的媒体，把页面撑得比屏幕更宽。
过宽的表格
列数很多的价格表或对比表。
无法断行的长文本
无法换到下一行的长 URL、电子邮件地址或代码。
如何修复
添加 viewport 标签
在页面头部加入 <meta name="viewport" content="width=device-width, initial-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 标签，并且在我们测试的三种尺寸下没有内容溢出屏幕。按钮太小难以点按、文字太小难以阅读等问题，需要进一步检查，或使用已登录用户可用的深入布局测试。