无需移动设备即可快速测试

Question

我正在努力让我的网站更具响应性。如果我将浏览器宽度减小到最小宽度，这是否可以替代测试移动设备上会发生什么？

我没有iPad Mini或Galaxy S2 / 3等设备，但仍希望确保网站看起来不错。

Answer 1

如果您想在本地测试您的设计，可以在浏览器中使用Web Developer Add-On，​​它可以让您选择查看响应式布局

此外，你可以获得很多在线网站，这将为你完成工作

• http://mattkersley.com/responsive/
• http://www.studiopress.com/responsive/
• http://www.responsivedesigntest.net/
• http://screenqueri.es/

Answer 2

Firefox上的

Ctrl + Shift + M（Windows）

Firefox（Mac）上的

Cmd + Option + M

Answer 3

如果您正在使用媒体查询，那么只需调整浏览器大小即可。您可以使用像firebug这样的检查工具并检查体宽来监视窗口大小。

Answer 4

检查责任人：帮助您在不同设备和不同方向上测试网站

http://www.responsinator.com/

Answer 5

我建议您查找允许您将浏览器调整为特定浏览器尺寸的浏览器插件。然后使用它设置常用尺寸... 320px，480px，600px等，和/或项目所需的任何内容。

对于Chrome，我使用Window Resizer。

Answer 6

我自己使用您描述的方法，它不是100％准确，一些文本大小可能会稍微改变，特别是如果您使用em或rems。如果测试盒布局和类似的东西它可以相当准确。

另一个解决方案是使用像http://quirktools.com/screenfly这样的服务也是一个相对好的解决方案。

我也使用的最佳解决方案是浏览器堆栈：http://www.browserstack.com/但它不是免费的。浏览器堆栈还允许您测试不同的操作系统，不同的浏览器和众多不同的移动设备。

Answer 7

最好的方法是使用设备，但是，如果某些或所有设备都不可用，那么你将不得不求助于其他一些（好的）工具。以下是一些例子：

• Testing Tool 1

• Testing Tool 2

请记住，这些工具会向您显示像素完美输出，用户互动/行为可能会有所不同。