设计工具 » 使用Chrome浏览器模拟手机端访问网页

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

发表于: 设计工具. 评论 (4)
Sponsor

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

下面来看看设置方法:

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

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

image

 

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

image

 

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

image

 

最后

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

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论4 Responses to “使用Chrome浏览器模拟手机端访问网页”

  1. 木思水amethyst - 回复
  2. 前端博客 - 回复

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

  3. 晓风东东 - 回复

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

  4. 老赵茶馆 - 回复

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


{ 发表评论 }