CSS图书馆 » HTML & CSS » 快速测试响应式网页设计的 Chrome 扩展

快速测试响应式网页设计的 Chrome 扩展

发表于: HTML & CSS. 评论 (2)
Sponsor

测试响应式的网站可以有很多方式,比如使用之前我们介绍过的「使用Chrome浏览器模拟手机端访问网页」,又或者用在线版的「Google Resizer」,然而今天为大家分享的是使用 Chrome 扩展版的 RWD 测试工具「Responsive Web Design Tester」测试效果也不错哦,下面来看看介绍。

响应式网页设计测试工具

使用教程

下载 「Responsive Web Design Tester」Chrome 扩展,安装后,浏览器右上角会多出一个扩展图标,点击他就可以设置当前网站用什么样的设备来展示了,如下图:

新增设备

此扩展默认有流行的移动设备,Apple、Android、平板等等已经很齐全了,然而你若想添加其它,可以通过设置该扩展了添加,并且支持添加用户代理(User-Agent)。

Step 1: 右击扩展图标,在弹出的菜单选择「选项」即要调出设置界面:

Step 2: 点击「New Device」按钮,并设置对应的名称分辨率即可。

对于不懂添加User Agent 的可以随机添加,或复制其它选项的,又或者查看 User Agent List 这个列表来添加对应的用户代理。

 RWD Tester Chrome 扩展特色

  • 以简洁的新窗口形式展示网页(无URL 地址栏、书签栏等干扰)
  • 方便快捷的查看方式(直接在浏览器右上角图标选择查看,也支持鼠标右键)
  • 可自定义分辨率
网站名称:Responsive Web Design tester
网站地址:http://responsivewebdesigntester.com/
Chrome扩展安装地址:chrome.google
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论2 Responses to “快速测试响应式网页设计的 Chrome 扩展”

  1. ZALRA - 回复
  2. 帅气小小琦 - 回复

    这个可以直接通过F12来尝试吧


{ 发表评论 }