为什么关键在宽度
响应式网站根据所在窗口的宽度来决定版式。在桌面宽度下，你拿到的就是桌面版式，事后把视频裁成什么比例都一样。要得到手机版网站的菜单按钮、上下堆叠的栏目和更大的点按区域，页面本身就必须按手机的宽度加载。下面每一种方法，都是实现这一点的不同途径。
按手机宽度加载页面，让网站返回它真正的移动版式，然后把它录下来。你可以录一台真手机的屏幕，可以用 Chrome 开发者工具的设备工具栏模拟手机再录窗口，也可以把网址交给一个按手机宽度读取页面、直接导出 9:16 或 4:5 视频的工具。千万别把桌面录像缩小：那只是一个小号的桌面页面，不是手机版网站。
三种方法
| 方法 | 适合 | 注意 |
|---|---|---|
| 录手机自己的屏幕 | 真实的触摸交互，真实的设备 | 状态栏和通知会入镜，滚动是手指一甩出来的 |
| Chrome 开发者工具的设备工具栏 | localhost 上或需要登录的页面 | 录的是一个小窗口，要手动或用脚本滚动 |
| 按手机宽度渲染网址 | 公开页面，干净均匀的滚动 | 访问不了私有页面 |
直接录手机
iPhone 和 Android 的快捷设置里都有内置的屏幕录制。它录的是真实的设备，这很真实；录的也是你的滚动，这就是问题所在：拇指一甩就滑，而且每一下都不一样。
- 打开勿扰模式，免得有通知滑进来。
- 先往下滚一点把浏览器的工具栏藏起来；如果页面支持全屏运行，也可以把它添加到主屏幕。
- 如果在意状态栏，事后在剪辑软件里把它裁掉。
在 Chrome 里模拟手机
打开开发者工具，开启设备工具栏（Mac 上是 ⇧ ⌘ M，Windows 上是 Ctrl Shift M），从列表里选一款手机。页面会以那个宽度和触屏风格的用户代理重新加载，返回它的移动版式。用录屏软件只录这个视口，并让脚本来滚动；自动滚动指南里有现成的脚本。
录制前把设备工具栏里的缩放设为 100%，否则录屏软件录到的是缩小后的画面，文字会发虚。
从网址渲染
在首页粘贴地址，然后在视频设置顶部选择「手机」或「平板」。页面会在我们的服务器上以那个宽度加载，于是网站返回它在那个宽度下真正提供的版式，适合手机的画面比例也随之可选：9:16、4:5 和 1:1。
- Cookie 横幅和聊天入口在手机屏幕上占的地方要大得多，它们会先被移除。
- 页面按双倍密度读取，所以在 1080 × 1920 的导出里文字依然清晰。
- 按平板或手机宽度读取，会让导出多花 3 点。除此之外没有任何变化。
想把它放进手机里？
渲染或录制出来的手机视频只有屏幕本身。想让它显示在 iPhone 或 Pixel 里，就把视频放到样机应用里的设备上，或者套用视频剪辑软件的模板。以 9:16 导出，就能填满设备屏幕，不留黑边。
拿你自己的网站试试
粘贴一个链接，免费预览滚动效果。注册即送 51 个免费点数，无需信用卡，导出的任何视频都没有水印。
在电脑上怎么录网站的手机版界面？
用 Chrome 开发者工具的设备工具栏按手机宽度加载页面，再录这个视口。或者把网址粘贴到一个按手机宽度读取页面、直接导出视频的工具里。
为什么我录的手机版网站视频看起来像一个缩小的桌面网站？
因为页面是按桌面宽度加载后再裁切或缩放的。版式由窗口宽度决定，所以页面必须按手机宽度加载，才会显示手机版网站。
手机版网站视频应该用什么画面比例？
要填满手机屏幕就用 9:16，比如 Reels、TikTok 和快拍。信息流帖子用 4:5。两种场合都可能用到，就选 1:1。
