使用Chrome浏览器模拟手机端访问网页

6 月 17, 2014 发表于: 设计工具. 评论 (4)

Sponsor

在2014年开始，兼容手机和平板设备的网站将会越来越流行，响应式网页也是未来的设计趋势。今天我们将介绍使用Chrome浏览器来模拟真实的手机端访问网站，这样方便设计师和前端人员测试页面的兼容性。

下面来看看设置方法：

STEP1: 首先确保你的Chrome在32以后版本。（小编是Chrome35版本）

STEP2: 按F12或（Ctrl+Shift+I）键来打开”开发者工具”，点击[Show drawer.]图标，如下图：

STEP3: 选择[Emulation]后再点击[Emulate]按钮即可。

除些之外，我们可以用Device来选择对应的机型进行测试，这里我们选择了iPhone 5，效果如下图，如果没有效果的刷新下网页就可以了。

怎样呢？是不是很方便，如果你有更好的测试方式，请在下方留言给分享给大家哦！

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

木思水amethyst - 回复

2014 年 10 月 15 日上午 10:55

前端博客 - 回复

2014 年 06 月 27 日下午 2:52

我之前一直在用resize window这个谷歌插件，感谢你让我看到这篇文章。可以去掉一个插件了

晓风东东 - 回复

2014 年 06 月 23 日下午 11:57

这个之前就有，不过现在变位置了，变了之后我一直都是自己拖动调整窗口大小的。这下方便多了。tip:可以点击齿轮右边的图标，把开发者工具单独列出窗口，不影响视图效果。

老赵茶馆 - 回复

2014 年 06 月 17 日下午 5:22

居然还有这个功能!而且还可以修改 user agent 信息，这点比其他模拟工具真实很多。