永利最大(官方)网站

Google Chrome移动端模拟

Chrome 32 发布以后，开发者工具中新增了一个新工具——mobile emulation。这个工具绝对是为移动设备响应式设计测试而生的。

如果你还没有打开该工具,那么请跟随一下步骤：

• 按F12(或者Cmd+Alt+l on a Mac)
• 点击Developer Tools under View -> Developer
• 右键网页，点击Inspect Element

在开发者工具的最上面，会看到一个像手机的新按钮。点击它开启移动模拟模式。如下图：

你可以看到开发者工具正常工作，但是有附加选项，网站被渲染成移动设备模拟状态。

设备设置

在左上角，设备设置选项中有46个移动设备可供模拟，你可以设置以下内容：

• 屏幕分辨率
• 横向和纵向旋转
• 设置像素比
• 在可视化区域缩放、全屏操作

网络设置

接下来是旁边的蓝色字体部分，网络设置。我们可以设置网路速度offline 到 no throttling，可以帮助我们观察网站加载速度快慢。

network下，我们可以手动设置代理，可以观察网站反映速度。

断点

断点怎么办？工具会自动检查CSS设置中的断点，并给每一个断点提供链接。

你也可以模拟硬件感应装置，包括：触控输入、地理定位、加速计等。

Usersnap Extension

完成上面的步骤，可很轻松模拟移动设备。不过还未完。

在不同情况下网站渲染情况如何？需要我们继续模拟。然后，如何将信息分享给开发者和设计者呢？

Usersnap Chrome扩展和开发者工具良好融合，使用 Usersnap Widget ，你可以添加屏幕注释兼容性报告，并使用移动模拟插件，将他应用到设置区域。

如果你没有使用Usersnap，你可以在 Chrome Web Store中下载安装。安装后在工具栏中可以看到Usersnap图标。第一次使用，需要激活。

点击"OK"，然后登陆，就可以进入工具设置页面。在页面底部可以看到自己的项目。如图：

选择项目，点击Select Project，你就可以使用工具了。回到移动模拟工具插件，我发现但页面达到768px断点，就会停止渲染。

因此，我想让我的团队知道这个问题，然后我可以修复它。点击Usersnap按钮，出现对话框，添加评论、高亮、注释、规则等内容。

你可以在上图中看到，我向我的团队发送的信息，网站外观、网站在移动设备中正常工作所需要的修改。通过这些方法，你是不是觉得网站设计、开发、测试更灵活，更可控呢。

总结

在这篇文章中，你学到了两个很棒的工具帮助你测试网站、网站应用在多设备中的兼容性。

你使用过吗？有如何体验？欢迎交流！

本文由慧都控件网翻译自，略有删改，
转载请注明：文章转载自：慧都控件网 及译文链接：用Google Chrome移动模拟工具做更好的响应式设计