若要全方位测试你自己或别人的响应式网站，则需要针对每一种设备和不同的屏幕尺寸，分别准备不同的测试系统。尽管这是最完美的办法，但通过改变浏览器窗口大小其实就可以完成大多数测试。除此之外，还有很多第三方插件和浏览器扩展可供选择，通过它们可以将当前浏览器窗口或视口设定为指定像素。必要时，还可以自动将当前浏览器窗口或视口切换成为默认大小（如1024×768像素）。这样你就可以轻松地测试不同屏幕视口尺寸下的网站效果。

迷恋像素？忘了它吧！

进入了响应式网页设计的教堂，就不要再迷恋像素（px）这个度量单位，因为大多数情况下我们不会用像素，而会使用相对度量单位（em或百分比）。相对单位更方便我们审查其他响应式设计作品，查看设计的变更之处。

Internet Explorer用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址如下：
http://www.microsoft.com/download/en/details.aspx?id=18359

如果你在使用Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）。

Firefox用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/），Chrome请下载Windows Resizer（https://chrome.google.com/webstore/detail/ kkelicaakdanhinjdeammmilcgefonfh）。

不喜欢使用浏览器扩展？还有一个方法：我写了个简单HTML页面来显示浏览器窗口的当前视口高度和宽度。页面用了jQuery框架，获取当前的视口的高度和宽度并显示出来。你可以在浏览器新标签页中打开这个页面，调整窗口大小，然后切回你要测试的页面查看效果。这个超级简单的“What size is my viewport page?”页面地址如下：
http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

视口和屏幕尺寸

视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。在下面的截图中，实际的视口尺寸显示在右上角（1156×921像素），同时Firesizer插件将窗口尺寸显示在右下角（1171×1023像素）。