App responsively-app 一屏并排预览多设备的响应式开发利器

做响应式网页，最折磨人的一步是「挨个窗口拖宽度看效果」：开五六个浏览器窗口，手动把同一个点击在每个窗口重复一遍，再肉眼比对哪里溢出了、哪里错位了。传统 DevTools 的设备模拟一次只看一个视口，要核对手机、平板、桌面三档就得来回切。Responsively App 换个思路：它把自己做成一个「改造过的浏览器」，让你在一块屏幕里并排看到所有目标设备，而且你在任一个设备上的点击会镜像同步到其余设备。

它是用 Electron 构建的桌面应用，定位就是「响应式网页开发必备的开发工具」，目标很朴素——帮你把这件事快上五倍。

项目基本信息

一、项目介绍

Responsively App 是一个基于 Electron、为响应式开发改造过的浏览器。它不再是「一次看一个设备」，而是把多个设备预览并排摆在一屏上，你在其中一个设备上的滚动、点击、输入会自动镜像到其他设备，方便你立刻发现「某档宽度下布局崩了」。它内置 30+ 设备档案，也支持自定义设备，并且加入了热重载，开发服务器一改代码，所有预览同步刷新。

二、核心优势

第一，多设备并排。一次看清手机 / 平板 / 桌面的差异，不用反复切换视口。第二，交互镜像。一个设备上的操作同步到所有设备，复现 bug 不再靠手速。第三，统一元素审查。一个 inspector 同时看所有设备里同一元素的状态，定位溢出、错位更高效。第四，一键截图。所有设备预览一次性导出截图，写文档、做评审省时。第五，热重载。接上开发服务器后，代码一改全部预览实时更新。第六，内置 MCP Server。最新版带了 Model Context Protocol 服务器，AI 编码代理能直接驱动它做可视化校验。

三、适用场景

适合所有要交付「在多种屏幕都好看」的网页的开发者：写官网、落地页、后台系统，需要反复核对断点的人；做设计走查时要把多设备截图甩进评审稿的人；以及想让 AI 代理（Claude Code、Cursor）在构建过程中自动验证响应式布局的团队。

四、安装教程

应用支持 Mac、Windows、Linux，可直接从 responsively.app 下载，也能用包管理器：

# macOS
brew install --cask responsively

# Windows (Chocolatey)
choco install responsively

# Windows (winget)
winget install ResponsivelyApp

# Linux (RPM)
sudo rpm -i https://github.com/responsively-org/responsively-app/releases/download/v1.18.0/Responsively-App-1.18.0.x86_64.rpm

Linux 也可下载 AppImage。常见报错：RPM 路径里的 [VERSION] 要替换成真实版本号（当前 v1.18.0），直接复制占位符会 404；winget/choco 若提示找不到包，先 winget search ResponsivelyApp 确认源已同步。

五、使用示例

装好启动后，把本地 dev server 地址贴进地址栏，勾选要预览的设备，即可看到并排视图；改代码后所有预览热重载。

如果想让 AI 代理接管预览，先装 @responsively/mcp：

claude mcp add responsively -- npx -y @responsively/mcp

或在 Cursor 的 .cursor/mcp.json 里加：

{
  "mcpServers": {
    "responsively": {"command": "npx", "args": ["-y", "@responsively/mcp"]}
  }
}

连上后代理能调用 navigate（在所有设备加载某 URL）、screenshot（抓单设备或全部设备预览）、click / type_text（真实键鼠事件，跨预览镜像）等工具，自动做响应式校验。

六、常见问题

问：它和浏览器自带设备模拟有什么不同？答：它一次并排多设备且交互镜像，原生 DevTools 一次只看一个。问：MCP 一定要开 app 吗？答：是的，agent 首次工具调用会自动拉起 app，之后复用。问：截图尺寸？答：抓可见视口并缩到最多 1000px 宽。问：Linux 注意什么？答：AppImage 首次要先手动启动一次，CLI 才能找到它的位置。

七、总结

Responsively App 解决的是响应式开发里「多设备核对」这件最琐碎也最易漏的事：并排预览 + 交互镜像让它比反复切 DevTools 视口高效得多，一键截图又顺手解决了走查文档。新加的 MCP Server 还让它接进了 AI 编码代理的工作流，能在构建时自动验证布局。对常做多断点网页的开发者，它是那种「用了就回不去」的工具；代价是它是一个独立桌面应用，需要单独安装而非插件。