测试神器:Google Resizer 响应式网页尺寸调整器

分享到:更多 ()

现在网页都流行跨平台展示,就是在桌面 PC、移动端以及平板电脑上都能友好浏览。如何设计出正确界面给用户查看,对网页设计师来说也是最大的挑战之一。Google推出免费工具Resizer测试网站在电脑、平板电脑及手机显示效果;
网站名称:Resizer
网站链接:http://g.co/design/resizer (需要翻墙而出)

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

去年Google Design网站释出一系列Material Icons免费图标集,提供超过900个以上平面设计素材,让开发者在进行开发时可直接取用精心设计质量优良的图案。最近Google再推出一项免费工具Resizer,让我们在电脑上测试网站于不同装置分辨率的显示效果,这对于网页开发者来说是相当实用的技巧,简单来说,只要输入网址,即可看到网站在不同画面大小的显示样式。

如果你要开发网站,现今难度上已经降低不少,但要面对的另一项挑战是如何在各种装置正常显示内容,除了电脑外,还包括移动装置,例如:智能手机或平板电脑,要设计出在不同分辨率、屏幕大小都能正确浏览的网站并不容易。

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

Google提供免费工具Resizer能让使用者直接在线即时测试,不用额外下载软件,只要输入检测网址,就能得到电脑、平板电脑以及手机显示效果,同时还能切换一些常用的屏幕分辨率,或者测试在行动装置直立、横式的显示状况。
Google Resizer跟微软Browser Screenshots最大差异在于Resizer能真正模拟出网页在不同装置的实际运作情形,当然你也可以控制画面,点选连接,跳换到不同页面,或者拉开侧边栏菜单等等,相较之下Resizer会更为实用。

使用方法

STEP 1

开启Google Resizer后,直接在上方输入你要测试的网站连接,预设也提供Google部分网站来让使用者进行实际操作,例如:Google Design、Material Design、Android。

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

STEP 2

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

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

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

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

STEP 3

切换到行动装置后,预设有几种宽度可以调整,例如:360、600、720和1024,宽度比较大的是将装置横放或平板电脑,从下图可以发现免费资源网络社群菜单在宽度过窄时会自动缩小,不会有挤出字段或跑到其他行列的问题。

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

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

Google 推出免費工具 Resizer 測試網站在電腦、平板電腦及手機顯示效果

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

值得一试的三个理由:

  1. Google推出自家RWD网页测试工具,输入网址即可使用
  2. 可测试网页在电脑、平板电脑以及手机的显示效果
  3. 内置多种分辨率尺寸,可随时切换即时预览

来源:free.com.tw

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 测试神器:Google Resizer 响应式网页尺寸调整器

0
分享到:更多 ()