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

测试响应式的网站可以有很多方式,比如使用之前我们介绍过的「使用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 地址栏、书签栏等干扰)
  • 方便快捷的查看方式(直接在浏览器右上角图标选择查看,也支持鼠标右键)
  • 可自定义分辨率

responsivewebdesigntester

译文地址:设计达人

(0)

相关推荐

  • 响应式网页设计布局

    响应式网页设计是目前流行的一种WEB设计形式,主要特色是页面布局能根据不同设备(平板电脑.台式电脑.智能手机)下能让内容适应性的展示,从而让用户在不同设备都能够友好的浏览网页内容,响应式有点像自适应的 ...

  • 教你避雷!网页设计中常见的17个UI设计错误集锦(附赠设计技巧)

    精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众群体.但是,当项目过大时,开发人员往往无法遵循最佳UI设计的原则进行开发.从而导致网站中某些重要 ...

  • 2019年网页设计趋势前瞻,先睹为快!

    追随最新的网页设计趋势,紧跟设计潮流是设计师们必做的功课之一.快速更迭的网页设计趋势和网页开发技术对2019年的网页设计趋势来说必将产生直接的影响.回顾2018年的网页设计趋势,不难看出许多设计趋势都 ...

  • 还在为黑白网页设计犯难?12款设计帮你轻松解决!!!

    网页设计,色彩已成为设计师们提升页面视觉效果和吸引力的重要手段.而且,现今,随着互联网技术的日益发展进步,色彩的巧妙应用,也不再仅仅停留于能够给人以强烈视觉冲击的五彩斑斓.事实上,结合设计师的大胆创意 ...

  • 【品牌维生素】浅谈当下网页设计趋势

    技术的革新带动了设计行业的的迅猛发展,这使得设计师和开发者有了更广阔的的探索天地.而网页设计也越发不再那么循规蹈矩,许多团队和公司都做了很多思考和创意.所以在我们适应着现代设计潮流的同时,不妨也来看看 ...

  • 再战明年!2016年火热的16个网页设计趋势

    设计趋势每年都在改变,出于各种原因,有的设计趋势在演进中逐渐消失,有的则在大家的熟练运用过程中渐入佳境,甚至逐步褪变成为主流.作为一个专注于网和平面设计的设计机构,我们对于所有相关的技术和设计趋势都极 ...

  • 响应式网页图片库设计的九个注意事项

    响应式设计无疑是当前网页设计领域当中,不可忽略的必要组成部分.而响应式网页中的图片显示又是老生常谈的问题,许多争论集中在响应式网站的图片应当怎么展示.继续延伸开来,那么响应式网站中的图片库应当如何设计 ...

  • 干货集锦——20个最佳Bootstrap着陆页模板,快速网页设计不是事儿

    着陆页是网站上的一个至关重要的页面,一个好的着陆页,可以引导访客在登陆你的网站时进行一系列操作,进而达成注册,购买或者其他转化.因此,设计师们都必须精心设计着陆页,因为只有精心设计的页面才可以增加转化 ...

  • 网页设计时如何快速插入注释

    对于网页设计来说,注释是不可缺少的.通过注释,可以方便客户对于代码的理解,而且易于维护. 插入注释格式: <!--注释内容--> Dreamweaver代码视图 01 打开Dreamwea ...