在电脑上截取网页手机版截图，最快的方法是先用手机视图打开页面，再截图：在 Chrome DevTools 的设备模式中，从设备工具栏菜单里选择 Capture screenshot 或 Capture full size screenshot；如果用手机视图扩展程序，点它的截图按钮即可。两种方法都能得到页面在手机上的显示效果，完全不用碰手机。
选哪种方法，取决于你需要的是可见屏幕还是整个页面，以及图片里要不要带手机外框。
可见区域还是整页？
先决定这一点，因为不同工具的能力不一样。
可见区域截图显示的是用户在手机屏幕上不滚动时看到的内容。适合用于问题反馈（“按钮被 Cookie 横幅挡住了”）、应用商店风格的宣传图，以及首屏设计评审。
整页截图会把整个可滚动的页面拼成一张长图。适合审校内容、确认落地页，或者在改版前存档页面。需要注意的是，由于浏览器会一次性渲染整个页面，固定页眉、懒加载图片和滚动触发的动画在长截图里可能显示异常。
方法一：Chrome DevTools 设备模式
- 打开 DevTools（
F12），切换设备工具栏（Ctrl + Shift + M，Mac 上为Cmd + Shift + M）。 - 选择一个设备并刷新页面。
- 打开设备工具栏右上角的三点菜单。
- 截可见区域选 Capture screenshot，截整页选 Capture full size screenshot。
如果想包含手机外框，先选择一个具体机型，并在同一菜单中开启 Show device frame，然后再截图。Chrome 会把 PNG 保存到下载文件夹。
同样的命令也可以通过命令菜单执行：按 Ctrl + Shift + P（Mac 上为 Cmd + Shift + P），输入“screenshot”。命令菜单里还有一个 Capture node screenshot，可以只截取选中的单个元素，记录某个组件时很方便。
方法二：手机视图扩展程序
如果你经常要截手机截图，每次走 DevTools 的流程会很繁琐。Mobile View Extension 的浮动工具栏上有截图按钮。选好手机或平板预设后，它会把带外框的可见区域保存为 PNG，和预览里看到的完全一致。由于切换页面时手机视图会保持开启，你可以在网站里一路点击，几秒钟截一页。
这种方法得到的是可见区域截图。如果要截整页长图，DevTools 更合适。
方法三：真机
真机截图最真实，因为它包含浏览器地址栏、刘海或灵动岛，以及真实的字体渲染。大多数手机在普通截图后会出现滚动截屏或“整页”选项。在 iPhone 上，Safari 的截图编辑界面有 整页 标签，可以把页面存为 PDF。
凡是客户或相关方会逐像素审视的内容，都请用真机截图。
如何得到清晰、准确的截图
几个细节能让手机截图更有用：
- 清晰度取决于设备像素比。 宽 390 px、像素比为 3 的 iPhone 视口，会生成宽 1170 px 的图片。如果截图模糊，检查模拟设备的像素比是否正确。当前机型的像素比见 iPhone 屏幕尺寸与视口一览表。
- 等字体和图片加载完。 在网页字体和懒加载图片加载完成后再截图，否则截图里会是后备字体和灰色方块。
- 想清楚浮层怎么处理。 Cookie 横幅和聊天组件会遮住小屏幕的很大一块。先决定截图里要不要显示它们；如果是问题反馈，通常应该显示。
- 注明模拟了什么。 在文件名或工单里写上设备、浏览器和日期，例如
pricing_iphone-16_chrome-emulated_2026-10-21.png。浏览器内的工具使用 Chrome 引擎渲染，所以标为“iPhone”的截图可能和真实的 Safari 略有不同。
在工作中使用手机截图
手机截图主要在三个场景中发挥作用。在 QA 中，把截图附到工单里，让开发人员看到具体在哪个视口出了问题，并注明宽度，宽度可以在设备工具栏上读到。在设计评审中，把手机和桌面截图并排放在一起，检查内容顺序是否依然合理。在营销中，可以在落地页和应用介绍里使用带外框的截图，但要用真机截图，或明确标注为模拟效果。
这些截图所属的完整测试流程，请参阅移动端网页测试清单。
常见问题
如何在 Chrome 中截取手机版网页的整页截图？
打开 DevTools，切换设备工具栏，选择设备并刷新，然后在设备工具栏的三点菜单中选择 Capture full size screenshot。
不用 DevTools 能截手机截图吗？
可以。带截图按钮的手机视图扩展程序（例如 Mobile View Extension）可以从浮动工具栏截取手机尺寸的画面。
为什么手机截图的像素宽度这么大？
截图按设备像素比保存。390 px 宽的视口在 3 倍像素比下，会生成 1170 px 宽的图片。这是正常的，能让图片在高密度屏幕上保持清晰。