前端工程师
以真实设备宽度在实时 DOM 上验证断点，不用切换 DevTools，也不用来回调整窗口。
全新工作台 - 一次 10 台设备
你的网站，完美呈现在每一部 iPhone 上。
Viewport 在你当前浏览的网站上叠加精准的设备外框。并排对比断点，在 QA 之前发现布局问题，导出带外框的截图或 4K 录制，全程都在你自己的电脑上完成。
任意网站 · 38 种设备 · 设置跨标签页同步 · 无需账号，无遥测，不上传
Chrome 应用商店★ 5.0·5,000+ 用户
编辑推荐Chrome 推荐
yourstore.com
适合谁用
一个扩展，三种工作方式
写响应式界面的人、设计它们的人，以及必须证明它们真的可用的人。
产品设计师
在精准外框中检查间距、字号层级与安全区域，然后把带外框的截图直接导出到设计规范或演示文稿。
代理商与自由职业者
在通话中实时展示响应式质量。一次共享屏幕就能同时呈现桌面端与移动端，无需分屏。
核心能力
四件做到极致的事
没有功能堆砌。整个扩展就是围绕这四项能力打造的。
在线演示
就在这里试用扩展
这就是真实流程：在工具栏选择设备、旋转、截图、开始录制。后面那个页面就是你的网站。
yourpage.com
402 x 874/34%
从开发到验收
在别人开口之前就证明它可用
响应式质量展示起来远比描述起来容易。Viewport 把一次内部检查变成可以直接交给客户的东西。
快速上手
三次点击即可运行
无需配置文件，无需账号，无需搭建项目。
01
打开任意页面
点击工具栏图标。一台设备会出现在实时网站之上，页面已加载完毕且可完全交互。
02
调整视图
选择设备，旋转、缩放并随意拖动，或者铺开一整个由手机、平板和显示器组成的工作台。
03
对比并捕获
让所有外框同步滚动，然后导出带外框的截图，或录下完整的操作过程。
实测，而非空谈
Viewport 领先在哪里
与 Chrome 应用商店中安装量最高的响应式预览扩展逐项比对。
本地优先架构
没有任何数据离开你的电脑，而且我们把过程摊开讲清楚
Viewport 不为你的数据设置后端。没有分析统计，没有遥测，没有远程加载的代码。设置保存在 chrome.storage.local 中；捕获的文件直接下载到你的磁盘。
要在外框中渲染页面，浏览器要求我们在预览请求上放宽 X-Frame-Options 与 Content-Security-Policy。我们把这一放宽严格限制在被预览的源上（页面中的第三方框架仍保有各自的保护），并在启用期间显示提示条。你一关闭预览，它就会被移除。
多数工具是悄悄地做，而且是对整个标签页做。我们宁愿让你知道。
价格
永久免费。需要时再升级 Pro。
免费版是没有时间限制的完整工具，不是试用。
Pro
最受欢迎$4.17/ 月，按年收取 $50
- 包含免费版全部功能，另外还有：
- 10 台设备的工作台与已保存场景
- 无限量 4K MP4，支持裁剪与倍速
- 版本对比与布局审计
- 网络限速、地理位置与区域设置
免费方案，无需注册随时可取消由 Lemon Squeezy 提供安全结账
常见问题
在你开口之前，答案已在这里
每位开发者安装前都会问的五个问题。
不能，任何运行在浏览器里的方案都不能。Viewport 会以各设备真实的 viewport 宽度渲染你的真实页面，并附带匹配的 client hints，能发现绝大多数布局与断点问题。发布前的关键验证仍然属于真机。