如何使用Chrome浏览器模拟各种移动设备浏览网站

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

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

模拟视口大小

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

厦门网站建设

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

厦门网站建设

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

厦门网站建设

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

结论

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