testing - 在桌面浏览器中测试移动网站

Question

我正在使用 jQuery Mobile 为 iPhone、Android 等开发一个移动网站。我希望能够在我的桌面浏览器中对此进行测试，并且想知道最好的方法是什么。我想我可以使用插件将 User-Agent 标头更改为适当的值并手动将浏览器调整为设备的宽度，但是有没有更简单/更可靠的方法？

更新

抱歉，我应该提到唯一可用的硬件是 Windows 笔记本电脑

score 7 · Accepted Answer

好吧，如果你有一台 Mac 并安装了 xCode，你可以使用模拟器。在所有 Apple 设备上打开 Mobile Safari 并指向您的网页

你也可以使用安卓模拟器（但我没有测试过它可以从浏览器访问网络）

或者，您可以使用插件（如您所建议的那样）。

我个人使用 Chrome 和这个插件：

效果不错。

我以前用过 Device Anywhere

您通过门户网站/网站访问设备并对其进行控制，但这需要花费 $$$$

实际设备测试将是最可靠的

有关的：

score 6 · Accepted Answer

在 Chrome 中按 F12 打开开发者工具栏。然后单击“切换设备工具栏”（平板电脑图标，选择元素旁边的左上角）。然后，您可以选择顶部的设备进行测试。

score 1 · Accepted Answer

还有用于远程测试设备的 PerfectoMobile……尽管它可能会非常缓慢。如果可能的话，我真的建议至少获得一些“基础”测试设备。

score 1 · Accepted Answer

还有http://www.browserstack.com/responsive可用于获取您的网站在许多给定设备上的样子的屏幕截图。

但是，在我在这里链接到的免费版本中，您可以获得多少屏幕截图是有限制的。

score 1 · Accepted Answer

通过使用名为Ripple Beta的 Chrome 插件，我在视觉上得到了很好的结果。不好的是，无法添加一些自定义设备，例如 8 英寸或 9 英寸或更大的平板电脑……但可以。我不确定它是否能够在真实设备上显示一些可见的错误，但看起来不错。

score 0 · Accepted Answer

Manymo应该可以很好地为您模拟 Android。它准确地向我显示了我的手机显示的内容，即使我的桌面浏览器没有。Manymo 是一个有很多安卓手机的网站。只需单击一个并输入您的 URL。有Android版本和屏幕尺寸等选项。

score 0 · Accepted Answer

寻找 Chrome 插件Responsive Web Design Tester - 您将能够在所有平台上模拟不同设备尺寸的移动浏览器。