本篇文章主要介绍了"酷站两连发!人工筛选的可商用图库泼辣有图+响应式网页开发神器",主要涉及到方面的内容,对于产品设计感兴趣的同学可以参考一下:
编者按:今天的两枚酷站,一个是特别强调图片背后故事的可商用图库「泼辣有图」,另外一个是能帮开发者测试不同设备上,网页内容自适应是否正确的扩展插件,一个以品质取胜...
以往我都是使用 User-Agent Switcher 功能来自定义浏览器的 User Agent,不过这方法其实没那么好用,又要经常切来切去实在很不方便,使用 Responsive Web Design Tester 彻底解决开发上的问题,让开发者在修改网页时能更加得心应手。
STEP 1
在浏览器安装 Responsive Web Design Tester 后,点选该按钮会显示工具的主功能,我们从「Select Device」选择要测试仿真的设备名称类型。

可以看到 Responsive Web Design Tester 预设已提供约 24 种的设备类型,包括大家熟悉的 HTC One、Nexus 7、BlackBerry、Kindle Fire、iPad、iPad Pro、iPad Mini 及 iPhone 。
注意每一种设备都会有两种选项,分别为横幅式(Landscape)和直立式(Portrait)。这也会仿真手机或平板计算机在直立或横放时呈现出的不一样的分辨率。

STEP 2
试着选择直立的「iPhone 6(s)」来仿真浏览优设网的样式,Responsive Web Design Tester 会在浏览器内再开启一个适当大小的窗口。
比较特别的是在测试中我发现网页被正确载入为行动版页面,这也表示 Responsive Web Design Tester 并不是只有调整窗口分辨率,而是连 User Agent 也一并修改了!

接下来我再使用「iPad」模拟浏览网页的效果,这次使用横幅式的设备,可以看到网页依旧能在该分辨率范围内正确显示,这也就是前面提到的使用「响应式网页设计」优势。

STEP 3
当然,测试环境可能会依照每个人的情形而有所不同,内建的行动设备类型并不一定符合每一位开发者。还好 Responsive Web Design Tester 内建选项设定,能让我们自由调整要仿真测试的设备类型和分辨率,同时也能编辑群组来管理更多的设备,非常强大!

值得一试的三个理由:
- 支持 Google Chrome、Firefox、Opera 三大浏览器
- 内建 24 种平板计算机、行动设备,可自由调整设定选项
- 除了调整分辨率外,也切换 User Agent 达到最正确的模拟效果
【优设酷站22连发!】