本篇文章主要介绍了"酷站两连发!谷歌的网站多设备在线测试工具+免费音效素材站",主要涉及到方面的内容,对于产品设计感兴趣的同学可以参考一下:
编者按:今天介绍的两枚酷站,一个谷歌最近刚推出的Resizer,可以帮你测试网站在不同设备上的显示效果(附jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播),另外一个也是新推出的音效素材站,每周更新,免费...

编者按:今天介绍的两枚酷站,一个谷歌最近刚推出的Resizer,可以帮你测试网站在不同设备上的显示效果(附jrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播),另外一个也是新推出的音效素材站,每周更新,免费商用,网站界面也特耐看,挑一个吧~
最近 Google 再推出一项免费工具 Resizer ,让我们在计算机上测试网站于不同设备分辨率的显示效果,这对于网页开发者来说是相当实用的技巧,简单来说,只要输入网址,即可看到网站在不同画面大小的显示样式。
如果你要开发网站,现今难度上已经降低不少,但要面对的另一项挑战是如何在各种设备正常显示内容,除了计算机外,还包括移动设备,例如:智能型手机或平板计算机,要设计出在不同分辨率、屏幕大小都能正确浏览的网站并不容易。
Google 提供免费工具 Resizer 能让使用者直接在线实时测试,不用额外下载软件,只要输入检测网址,就能得到计算机、平板计算机以及手机显示效果,同时还能切换一些常用的屏幕分辨率,或者测试在行动设备直立、横放的显示状况。
Google Resizer 跟微软 Browser Screenshots 最大差异在于 Resizer 能真正模拟出网页在不同设备的实际运作情形,当然你也可以控制画面,点选链结,跳换到不同页面,或者拉开侧边栏选单等等,相较之下 Resizer 会更为实用(如果不是只想看截图的话)。
Resizer
STEP 1
开启 Google Resizer 后,直接在上方输入你要测试的网站链结,预设也提供 Google 部分网站来让使用者进行实际操作,例如:Google Design、Material Design、Android。

STEP 2
接着就会看到网页出现在 Resizer 中间,从右上角来切换计算机或手机(平板计算机)。

看到上方有一排类似尺的工具栏吗?这是在 Resizer 调整窗口宽度的功能,点选后就可快速切换一些宽度大小,同时网站也会立即变化。

STEP 3
切换到行动设备后,默认有几种宽度可以调整,例如:360、600、720 和 1024,宽度比较大的是将设备横放或平板计算机,从下图可以发现优设网在宽度过窄时会自动缩小,不会有挤出字段或跑到其他行列的问题。

一样可以测试网页在平板计算机上直立、横放的显示效果。

不过 Google Resizer 工具仅在窗口大小上进行调整,并无法重设 User-Agent 来仿真行动设备浏览器的显示情形(例如行动设备用户应该会看到行动版网页,但在 Resizer 只会看到一般网页),若有类似需求,我会建议使用 Responsive Web Design Tester 直接在浏览器测试网站显示效果,可能会来得更为准确。