chrome 仿真_使用Chrome的设备指标进行视口仿真

在构建或制作响应式网站原型时，我们需要以多种视口大小对网站进行测试，以检查布局和页面是否显示良好 。 这样做的方法有多种：您可以使用Adobe Edge Inspect或浏览器扩展程序，例如Dimensions for Chrome 。

问题是这些工具并非总是在每种情况下都能无缝运行。 Adobe Edge Inspect要求您的笔记本电脑和移动设备在同一无线连接下进行连接，XIP.io也要求您的设备连接到Internet，以我的经验，在iframe下调试自适应网站或不得不重复调整大小是非常痛苦的浏览器窗口。

模拟视口大小

Chrome现在具有内置功能，可让您以多种尺寸的设备屏幕和分辨率模拟您的网站。 要启用它，请从“ 视图”>“开发人员”>“开发人员工具”菜单中导航以打开“ 开发人员工具设置” 。

转到“ 设备”面板。 选择添加自定义设备以添加自定义视口大小，像素比率和用户代理。

现在，我们添加的自定义设备将显示在设备选择中，如下所示。 选择它，您应该会看到视口立即更改。

对于其余部分，您可以在Screensiz.es中找到移动设备视口尺寸的完整列表。

结论

Google Chrome浏览器具有许多有用的功能，可以简化开发过程。 现在，通过使用Chromes 设备设置，您可以针对特定的视口大小调试网站，而不必处理受限的连接，使用第三方浏览器扩展程序或通过iframe拖网操作。

翻译自: https://www.hongkiat.com/blog/chrome-viewport/