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/kkelicaakdan- hinjdeammmilcgefonfh）。
不喜欢使用浏览器扩展？还有一个方法：我写了个简单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像素）。
 |
现在，我们带着所有需要的工具，开始鉴赏最好的响应式网站。启动你钟爱的浏览器，打开浏览器调整工具，访问http://thinkvitamin.com/ 。
如果你的视口宽度大于1060像素，你会看到如下图所示的布局： 广州网站设计
 |
 |
