在 Chrome 浏览器仿真中查看移动网站的完整容器框架答案

【问题标题】：Viewing the Full Container Frame of the Mobile Website in Chrome Browser Emulation在 Chrome 浏览器仿真中查看移动网站的完整容器框架
【发布时间】：2014-10-21 02:20:29
【问题描述】：

我会尽力解释。我正在使用我的 Chrome 浏览器来模拟 iPhone 5 并查看不同的网站。该网站显示在一个对应于 iPhone 5 框架的框架中，如下所示：

这一切都有效，但我也想在不滚动的情况下看到可滚动的内容。换句话说，我有兴趣在不滚动的情况下截取整个页面的单个屏幕截图。反正我能做到吗？

【问题讨论】：

对于投票结束此问题的人。我应该在哪里发布，我应该问谁？

标签： google-chrome mobile mobile-website

【解决方案1】：

这不是 iPhone 特有的，但 Google 的 PageSpeed API 提供了在“移动”和“桌面”模式下查看特定实时网站屏幕截图的功能。这并不是针对特定设备的确切指示，但可以方便地大致了解网站在移动设备上的构成方式，并且如果您正在查看许多网站，也很方便。

我需要这个来做我正在做的事情，并在这里使用 Angular 写了一个 plunk：http://plnkr.co/edit/c7fAFx?p=preview。最后，它只是进行以下 GET 调用，并使用稍微修改的结果来显示图像。

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=<your-website-url>&key=<your-api-key>&screenshot=true&strategy=<mobile OR desktop>

您需要注册一个 Google API 帐户并授予其访问 PageSpeed API 的权限。不确定这是否是您所追求的，但可能会有所帮助。

【讨论】：