有没有办法同时查看我的页面在多个设备上的外观？
BLUE_Responsive 是一款免费的 Chrome 扩展程序，当您在要检查的页面上按 Alt+R 时，它会同时在移动设备、平板电脑和 PC 的一个屏幕上打开。当您在一台设备上滚动时，所有屏幕都会一起移动，以便您可以按设备比较同一部分，并且可以将每个设备的整个屏幕和页面保存为 PNG。
要点
- BlueCanvas BLUE_Responsive是一款免费的 Chrome 扩展程序，当您在要检查的页面上按 Alt+R 时，它会同时在移动设备、平板电脑和 PC 的一个屏幕上打开。
- 当您在一台设备上滚动时，所有屏幕都会一起移动，因此您可以立即比较同一部分在不同设备上的外观。
- 输入所需的尺寸并将其保存为我的配置，并将每个设备的屏幕和整个页面保存为PNG。
视频中出现的场景
视频开始时，同一页面根据屏幕宽度变化为 PC、平板电脑和移动设备形状。同一页面在每个屏幕上看起来都不一样，因此我们引入了一个工具来比较一个屏幕上的差异。
| 视频中的场景 | 该怎么办 |
|---|
| 使用 Alt+R 打开 | 当您在要检查的页面上按 Alt+R 时，会出现几个预览屏幕。 |
|---|
| 同时比较 | 手机、平板、PC一屏同时查看，手机、平板轮流查看大屏。 |
|---|
| 一起滚动 | 一个卷轴将所有屏幕移动到一起以比较相同的部分 |
|---|
| 保存我的配置 | 输入您想要的尺寸并保存您的设备配置 |
|---|
| 另存为 PNG | 将每个设备的屏幕和整个长页面保存为 PNG。 |
|---|
每个屏幕都是以实际设备的 px 宽度绘制的，因此 CSS 媒体查询按原样工作。视频的最后一个场景将引导您在 Chrome 应用商店中搜索 BLUE_Responsive。
你在什么情况下使用它？
创建屏幕后，您需要确保它在移动设备和平板电脑上保持一致。该工具可帮助您一次性完成所有检查，而无需在设备之间切换。
- 检查新创建的页面在移动设备上是否不同步时
- 当您并排查看同一部分在手机、平板电脑和 PC 上的外观时
- 检查服务器单独下载移动 HTML 的网站的移动响应时
- 当您需要将检查的屏幕保存为图像时
由于移动框架改变了请求的User-Agent并将其发送到相应的设备，因此您还可以单独检查服务器划分移动屏幕的站点。
如何开始
在 The Blue Canvas 主页的 PROGRAM 菜单中， RESPONSIVE CHECKER 您可以前往简介页面。安装是从 Chrome 网上应用店完成的。
- 安装：在 Chrome 网上应用店中搜索 BLUE_Responsive 并将其添加到 Chrome。
- 在：在要检查的页面上按 Alt+R 打开叠加层。 Alt+Shift+R 也以同样的方式工作
- 添加设备：一键添加手机、平板电脑和台式机并滚动进行比较
- 节省：输入所需的分辨率，保存常用的配置，并将每个设备的屏幕或整个页面保存为PNG。
使用方法及环境
它是免费的，不需要会员资格。它适用于支持 Manifest V3 的基于 Chromium 的浏览器，包括 Chrome。
确定是否发生触摸的基于输入的媒体查询被评估为桌面输入值。此外，如果单击框架内的链接移动到另一个页面，移动显示可能会丢失，因此它被设计为检查单个页面的工具。
完整视频字幕（6个场景）
同一页面，不同屏幕
同一页面在每个屏幕上看起来不同。我们向您展示当屏幕宽度变化时布局如何变化。
使用 Alt+R 打开
在要检查的页面上，按 Alt+R 并打开 Blue Canvas BLUE_Responsive。将出现几个预览屏幕。
手机、平板、PC同时查看
在一个屏幕上同时检查您的手机、平板电脑和 PC。依次查看手机和平板电脑，比较布局上的差异。
一起滚动
当您滚动一次时，所有屏幕都会一起移动。按设备并排比较同一部分。
输入尺寸并保存我的配置
直接输入所需的尺寸并保存常用的设备配置。
PNG保存和安装说明
每个设备的屏幕和整个页面都保存为 PNG。从 Chrome 网上应用店搜索并安装免费的 Chrome 扩展程序 BLUE_Responsive。
常见问题解答
BLUE_Responsive 是免费的吗？
是的。简介页面注明无广告、无付费、无订阅、无会员注册，安装所有功能后即可无限制使用。
这与浏览器的开发人员工具设备模式有何不同？
开发人员工具中的设备模式一次仅显示一台设备。 BLUE_Responsive 在一个屏幕上同时显示多个设备并同步滚动，因此您可以一目了然地比较同一部分在不同设备上的显示效果。
我还可以检查服务器单独下载移动页面的网站吗？
是的。移动框架将请求中的 User-Agent 替换为相应的设备值。因此，即使服务器将移动 HTML 划分为用户代理的站点也可以检查移动响应。
有什么限制需要注意吗？
确定是否发生触摸的基于输入的媒体查询被评估为桌面输入值。这是一个旨在检查单个页面的工具，因为当移动到框架内的另一个页面时，移动显示可能会消失。
在手机、平板、PC上同时打开您想查看的页面。
Blue Canvas BLUE_Responsive 是一款免费的 Chrome 扩展程序，无需注册。从 Chrome 网上应用店安装后，首先在要检查的页面上按 Alt+R。
探索 BLUE_Responsive →
