真沮丧，我的这篇文章真的翻译的这么差？

本来一时兴起给一个技术网站免费翻译一篇文章，结果好几天没理我，我去问，今天下午告诉我我翻译的不太好，要找别人重新翻译。我觉得很沮丧，因为不是要去发表什么的，又是大家免费做，觉得没必要要求这么严格，而且也没有说哪里不太好，可不可以改改什么的，我费了好大功夫就被两句话打发了。我把我的译文贴出来大家帮忙看看，到底哪里比较差？必须说我本身英语水平还可以，但是这篇文章中有一些东西不是很熟悉，可能是我语言组织的太差了。总之，其实我是想明白到底哪里有差距，死也死得明白呀。原文在这里：http://www.webdesignerdepot.com/2013/07/how-to-test-responsive-designs-for-free/

我的译文：

怎样免费测试响应式网站

“别去改变浏览器的大小，你会把它弄坏的！”你有多少次听到过这句话？好吧，可能不太多，但是如果你在开发响应式网站，你知道我在说什么：针对每一次DOM或者CSS的编辑，你会来回拖动浏览器的边，测试你的改变并查看是不是有什么东西被搞坏了。

基本上，这些努力的目的是试图模拟不同设备的屏幕大小。

如果你是为了公司开发，你的公司可能为你提供了不同设备供你测试。我工作的地方，我们有一个iPad，一个iPod，一个或者两个其它的平板电脑，笔记本和台式机。如果你的设备没有这么奢侈，你就只好有什么用什么。

在我家里，我们有两个不同的平板电脑，两个不同的Android设备，一个Kindle和一个Nexus 7。我用这些设备测试我自己写的程序，但是明摆着这些设备还不是很完全。根本没有IOS设备，并且我也不计划在每一款新的电话/迷你平板电脑/平板电脑上市时都去买一个，虽然我还是有那么一点超前消费的。

那么一个开发者应该怎么做？万幸的是现在有越来越多的基于浏览器的工具可以模拟大量不同设备的屏幕大小。当然，不同的工具有不同的功能和不同层次的应用。我们在这看几款吧。

为了测试的目的，我使用了由我制作的第一个真正意义上的响应式网站，PajamasOnYourFeet.com。这个网站是基于Brownie HTML5 template的，它被非常大方的免费提供给在EGrappler上的开发社区。

Am I Responsive?

Am I Responsive? 可以在四个不同的设备上提供你的网站的一个非常简单快捷的视图。所有的四个设备都是iOS的，并且它的开发者解释说它仅仅着眼在网站本身。它不提供控制和选择，仅仅是一个非常简单的优雅的显示。

视口的尺寸是：

·        Desktop – 1600 x 992px 按比例缩小到0.3181

·        Laptop – 1280 x 802px 按比例缩小到0.277

·        Tablet – 768 x 1024px 按比例缩小到0.219

·        Mobile – 320 x 480px 按比例缩小到0.219

他的开发者说，“这不是一款测试工具，你在真正设备上的测试还是非常重要的。其实，这个工具是一个快速呈现（至少对我来说）以使他人可以看到你在和客户的会议上所讲的东西。”

有两个非常棒的功能，你可以在屏幕上把“设备”拖拽到任何你想要的地方，另外你可以将你的站点嵌入到一个链接中并共享给他人。在FireFox里，起码在看测试站点的结构时，iPhone没有显示出在边上的滚动条，但是在IE和Chrome里是有的。

 

deviceponsive

deviceponsive和Am I Responsive?有些类似，在没有设备被指定前，它也是简单的干净的显示你的站点，没有控制和选择。所有的设备显示在一个长长的页面上。它提供了一个非常有趣的功能，你可以通过编辑标题的背景颜色和嵌入你自己的徽标来定制网站的标题，然后通过抓屏进行共享。用这个方法你可以在该网站打上自己的商标并分享给你的客户。

在这个网站上模拟的设备和屏幕尺寸是

·        Mac book – 1280 x 800

·        iPad portrait – 768 x 1024

·        iPad landscape – 1024 x 768

·        Kindle – 600 x 1024

·        Kindle landscape – 1024 x 600

·        iPhone portrait – 320 x 480

·        iPhone landscape – 480 x 320

·        Galaxy portrait – 240 x 320

·        Galaxy landscape – 320 x 240

对于这些工具的大多数， 滚动条显示在较小的设备上。在实际的设备上应该是没有滚动条显示的，但是为了在非触摸设备上滚动测试视图，必须要做一些迁就了。

responsive test

像deviceponsive一样，responsive test在不同的设备上显示你的站点，但是它们并不是一起显示在一个页面上的，而是要你通过一个位于页面顶端的很简单的菜单选择设备。当我在一个中等尺寸的笔记本上使用这个站点时，我发现将页面放大可以得到更好的效果，这样你可以看到在测试设备边框内部的完整的测试站点。

这里一共提供了13个不同的视口，包括从大尺寸的台式机显示器到他们所谓的“Crappy Android”（公平些说，这些设备也被称作“Nicer Android”）。

我在这个站点上再次发现Firefox支持的不是很好。请看下面的屏幕截图，在绿色标题和白色背景的内容区域之间，有一条蓝色的地方，而这里本应该显示一个图形滑块（imageslider）的。

responsive.is

和前面两个网站很相似，唯一不同之处在于从一个设备显示切换到另一个时responsive.is有很流畅的动画，并且半透明的覆盖方式也可以显示出一个网站超出视口之外部分的真实样子。

这里的设备选择包括Auto，你的网站会被填充在浏览器的窗口上，显示出如果你真的遇到了这样大的屏幕你会看到的网站的样子；Desktop；Tablet Landscape；TablePortrait；SmartPhone Landscape；和SmartPhone Portrait。（但是）都没有提供像素尺寸。

Screenqueries

有一些不同的功能和选项将Screenqueries些许的和其它网站区别开来。这里提供了14个手机和12个平板电脑，带有单独的控制以切换竖向和横向模式。它们显示在一些像素格子上而维度显示在测试视图的右下。视图的边是可以拉拽的，这样你可以测试任意的尺寸。鼠标停留在测试区域的上方或者单击测试区域，背景会切换成灰色，这样你能看到一个混乱程度低一些的视图。

这个站点的一个有趣功能是，对于好几种设备这里有一个“Trueview”的选项，它显示你的站点在特定设备上的浏览器中被改动了。（这个地方翻译的不是很确定，感觉作者多写了一个chrome。原文是“ which shows your site wrapped in the specified device’sbrowser chrome.”）

不幸的是，特别是在我已经开始习惯使用它时，Firefox不能显示测试站点的图形滑块。不要责备我，Firefox实际上正是我爱使用的浏览器，不过还好，我们还有其它的选择。

Screenfly

在Screenfly上可用性确确实实大幅提升了。它提供了9种大于平板电脑的设备，从10”的笔记本到24”的台式机，5种平板电脑，9种手机，3种电视寸尺，和任意屏幕尺寸的选项。对于任何一种选择你都可以通过独立的一个控制菜单将其旋转成横式或者竖式。你可以选择允许滚动或者相反，并且你可以通过单击一个按钮产生一个可共享的链接。

这个网站的显示像素维度信息的方式使得它很易用。菜单中的每种设备都显示了名字和像素维度，实际浏览器窗口的维度显示在窗口的右上角，被选择设备的维度显示在视图下方的注脚处，同时显示 那里的还有被测试站点的URL。通过点击那里你可以抓到屏幕截图并且和你的客户分享信息。

根据上面提到的功能已经可以说这个一个非常好的工具了，但是Screenfly的开发者们发现了让它再提升一个档次的东西，提供了代理服务器的功能。引用自他们的网站，“Screenfly可以在你浏览你的网站时使用一个代理服务器模拟设备。该代理服务器模拟的是你所选设备的用户代理（user agent），而不是那些设备的行为”。

这里提到的所有其它设备仅仅处理CSS。Screenfly是唯一一个允许基于代理进行测试的。

我自己基于代理测试了一个自己做的提供移动版本的网站，对这个移动站点测试的结果非常好。显示出来的东西正像我期待的，并且功能也是可以被测试的。必须说，代理测试是很旧的东西了，但是这个站点被生产于“黄金年代”，并且代理服务器的功能也确实让这个站点更加有用了。

结论

我们看到了好几款用来测试你的响应式站点的资源了。它们都有独有的功能，这样你根据自己的喜欢和需求使用不同的资源，并且我很鼓励你去挖掘和尝试它们。作为web开发者，真正有用的工具自然越多越好。

关于作者

Steve Ralston是一个就职于Waterloo,IA的职业网络开发者。你可以在LinkedIn上联系到他。他刚刚出版了自己的第一本书，“Pajamas On Your Feet”，你可以在pajamasonyourfeet.com上找到它。