多视口同时预览
在手机、平板和桌面框架中同时渲染同一个 URL。每个框架都采用真实设备宽度，因此 CSS 断点会正常生效。
Chrome 扩展 · v1.3.0
响应式检查， 手机、平板、桌面
响应式检查， 手机、平板、桌面
一屏同时完成。
BLUE_Responsive 是一款免费的 Chrome 扩展，可将当前页面同时显示在多个设备视口中。CSS 媒体查询会按真实设备宽度生效，各视口滚动保持同步；移动端 UA 渲染还能检查服务器按设备返回的移动版 HTML。设备截图和整页滚动截图也能一键保存。
为何选择 BLUE_Responsive
无需反复切换设备并刷新页面
不用再反复开关 DevTools 的单设备模式。将多个视口并排放在同一浮层中，一次滚动即可同时检查所有设备。
滚动同步
滚动一个设备时，其他设备会按相同比例同步移动。可一眼比较所有屏幕上的同一内容区，也可随时关闭同步。
真实移动端 UA 渲染
移动端框架会把请求的 User-Agent 替换为所选设备。按 UA 返回独立移动版 HTML 的网站，也能获得与真实手机相同的页面。
设备选择
常用设备与自定义分辨率集中管理
一键添加常用手机、平板和桌面设备，也可直接输入所需的 W×H 分辨率进行检查。
添加设备
手机
- iPhone SE · 375×667
- iPhone 12・13・14 · 390×844
- iPhone 15・16 · 393×852
- iPhone 15・16 Pro Max · 430×932
- Galaxy S24 · 360×800
- Galaxy S24 Ultra · 384×824
- Pixel 8 · 412×915
- Galaxy Z Fold（折叠）· 344×882
平板
- iPad mini · 768×1024
- iPad Air 11英寸 · 820×1180
- iPad Pro 11英寸 · 834×1194
- iPad Pro 12.9英寸 · 1024×1366
- Galaxy Tab S9 · 800×1280
桌面
- 13英寸笔记本 · 1280×800
- 15英寸笔记本 · 1440×900
- HD 桌面 · 1366×768
- FHD 桌面 · 1920×1080
- 宽屏 QHD · 2560×1440
自定义
宽度
高度
添加
通过预设标签（响应式三件套、移动端优先、显示全部）快速载入常用布局，也可选择 ★ 保存创建自己的预设。
核心功能
更快完成响应式调试
从预设、旋转、缩放、换行，到预览限制嵌入的网站，实用检查功能都集中在一个浮层中。
预设 & 保存布局
可使用响应式三件套、移动端优先、显示全部等内置预设标签。选择★ 保存可把当前布局加入个人预设，并通过标签上的✕删除。
自定义设备
添加常用手机、平板和桌面设备，或输入自定义 W×H，即时创建并检查任意分辨率。
横竖屏旋转
使用⟲按钮在横屏和竖屏之间切换每个设备框架，快速比较两种布局。
缩放滑块 & 自适应
调整整体缩放比例，或自动适应可用高度。可在单行横排和自动换行网格之间切换，让多个设备都显示在一屏内。
截图 & 滚动截图
可将框架可见区域（📷）、拼接后的整页长截图（📜）或包含所有设备的完整窗口（🖼）保存为 PNG。重复出现的固定页眉会自动清理。
预览限制嵌入的网站
对于通过 X-Frame-Options 或 CSP frame-ancestors阻止嵌入的网站，查看器只会在当前标签页中临时移除预览目标网站响应中的相关标头。页面内来自其他网站的框架不会被修改。
快捷键开关
通过工具栏图标、Alt+R或Alt+Shift+R在任意页面开启或关闭查看器。在浮层中，ESC用于退出，F5和Ctrl+R只刷新设备框架。
快捷键
使用快捷键提高效率
默认开关键为Alt+R和Alt+Shift+R。可在chrome://extensions/shortcuts中改为所需按键。
Alt + R
开关查看器
开启或关闭浮层，与工具栏图标相同
Alt + Shift + R
开关查看器（备用）
Alt+R 与其他应用冲突时使用
ESC
快速退出
立即关闭浮层并返回普通页面
F5 / Ctrl + R
仅刷新框架
不退出查看器，只重新载入设备框架
安装
一分钟内完成安装
从 Chrome 应用商店一键安装，即可立即开始使用。
从 Chrome 应用商店添加
打开Chrome 应用商店中的 BLUE_Responsive，选择添加至 Chrome，再将扩展固定到工具栏即可完成设置。
在任意页面开启
在需要检查的页面按Alt+R（或Alt+Shift+R），也可以选择工具栏图标。然后在浮层中添加设备并开始滚动。
如需预览 file:// 页面
要检查本地 HTML 文件（file://），请在扩展详情页启用允许访问文件网址。普通http(s)页面无需额外设置即可使用。
常见问题
常见问题
这里汇总了安装前经常遇到的问题。
BLUE_Responsive 真的免费吗？
是的，完全免费。没有广告、付费、订阅或账号注册，安装后即可无限制使用全部功能。
它与 DevTools 设备模式有什么不同？
DevTools 一次只显示一个设备。BLUE_Responsive 可将多个设备同时放在一个屏幕中并同步滚动，因此能一眼比较同一内容区在不同视口中的表现。
能否预览服务器单独提供移动版页面的网站？
可以。移动端框架会把请求的 User-Agent 替换为所选设备 UA，并将新版 Chrome 发送的UA Client Hints（Sec-CH-UA*）设为移动端值。页面载入前还会覆盖navigator.userAgent、触控和屏幕分辨率信息，因此服务器端 UA 或 CH 分流以及 JavaScript 移动端检测都会将其识别为移动设备。
能否预览禁止嵌入的网站？
大多数情况下可以。在启用查看器的标签页中，扩展会仅对预览目标域名的 iframe 响应临时移除X-Frame-Options和 CSP frame-ancestors标头。来自其他网站的嵌套框架仍受保护；关闭查看器、离开页面或关闭标签页后，规则会立即解除。
可以把开关键改成 Ctrl+Alt+R 等组合吗？
可以。Chrome 不允许在 manifest 默认值中使用Ctrl+Alt组合，因此扩展默认提供Alt+R和Alt+Shift+R。你可以在chrome://extensions/shortcuts中设置受支持的任意快捷键。
有哪些需要了解的限制？
像@media (hover:none)和(pointer:coarse)这样基于输入方式的 CSS 媒体查询会按桌面输入值计算；需要完整模拟时，请使用 DevTools 单设备模式。此外，在框架内点击链接跳转到其他页面可能会丢失移动端标记，因此本工具主要面向单页检查。
支持哪些浏览器？
BLUE_Responsive 基于 Manifest V3，可在新版 Chromium 浏览器中运行，包括 Google Chrome、Microsoft Edge、Brave 和 Arc。
Contact
即使想法还不成熟也没关系。
让我们一起 梳理您的项目
请告诉我们您的现状与目标。
我们将为您梳理可行范围、推进方式及预估费用。
- 1确认咨询内容
- 2沟通范围与时间
- 3提供方案与报价