由于我们现在处于移动第一世界，因此能够轻松在手机或仿真手机上测试网站变得越来越重要。我与从事网站和社交媒体服务的人们合作，并鼓励他们定期从桌面浏览器中以移动视图打开网站。我特别在考虑浏览器的内置“移动视图”功能，该功能通常隐藏在浏览器提供的所有其他开发人员工具中，但是我很高兴考虑可以快速设置的任何功能。

如何从桌面浏览器打开网站的移动视图？

Firefox：

• 在Windows / Linux中，按Ctrl+ Shift+M
• 在macOS中，按option+ command+M

您还可以在（“工具”），“ Web开发人员”，“响应式设计模式”下​​找到菜单项。

铬：

您需要首先打开“开发人员工具”：

• 在Windows / Linux中，按Ctrl+ Shift+ I或仅F12
• 在macOS中，按option+ command+I

打开并集中开发人员工具后，您可以打开设备工具栏：

• 在Windows / Linux中，按Ctrl+ Shift+M
• 在macOS中，按command+ shift+M

您还可以通过打开开发人员工具（“更多工具”，“ Develepor工具”），然后单击表格“切换设备工具栏”前的看起来像手机的图标来找到菜单项。

苹果浏览器：

看来苹果默认情况下已禁用进入响应式设计模式的键盘快捷键。您可以按照本教程为它配置键盘快捷键。

您可以通过单击“开发”，“进入响应式设计模式”找到菜单项。如果看不到“开发”菜单项，则需要通过打开“首选项”，“高级”并勾选“在菜单栏中显示开发菜单”来启用它。

边缘：

• 按F12打开开发人员工具，然后按Ctrl+ 7打开“仿真选项卡”。配置要仿真的设备。

您可以通过在网页内右键单击并选择“检查元素”来使用鼠标打开开发人员工具。

Flimm的答案是100％正确的。万一记住快捷键太麻烦了，开发人员工具中的蓝色按钮可以在Web视图和移动/平板电脑视图之间进行切换：

或使用Firefox：

启用设备工具栏后，您可以从下拉菜单中选择要模拟的设备的品牌和型号。

为了进行测试，我使用以下网站：

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/sensitive/

上述两个站点均允许我以多种设备宽度查看Web应用程序。

在浏览器中添加“用户代理切换器”扩展，并指定移动用户代理。如果网站足够聪明，它将为您提供移动优化版本。

我不建议任何特定的扩展名。理想的浏览器应该具有内置的移动浏览器预设，并且能够基于每个站点启用或禁用用户代理切换。

对于那些喜欢使用单个浏览器或桌面“工作空间”有限（例如，低分辨率下的单个显示器小于21英寸）的用户，以上答案非常有用。

实际上，我最近发现了一个更有趣的解决方案：https : //blisk.io/

我将避免使用（某种）“会员链接”谋取任何个人利益（有一个“基于令牌的系统”，您可以赚取积分来获得免费的“团队云空间”和“高级功能” ），但Blisk实际上非常时髦。

这款基于Chromium的“开发专用浏览器”提供了多种方法，可在各种设备中在左侧显示垂直“窗格”的情况下演示页面，就像您看到Chrome开发者工具默认在右侧垂直列中一样。

看起来很不错。尽管其“免费增值扩展功能”有一些限制，但在并行比较中，“预览”页面/站点的PC版本和移动版本仍然非常有效。如果您在远程团队中工作，则付费功能似乎也很不错（尽管我个人认为它需要一个更好的“试驾”计划，然后才能吸引人们支付每月费用）。

完全公开：移动预览部分每天都有一个非常烦人的“时间限制”（从地址栏右侧的图标打开/关闭切换-从微小的链接更改为“设备预览”右上角的“显示设备列表”菜单）。

BliskDemo截屏

另外：我发现了一些浏览器扩展的真正巧妙的技巧，例如来自Chrome / Firefox的2种不同的“用户代理切换器”，它们使您可以在各种操作系统的浏览器用户代理字符串之间进行切换，从而使操作更进一步。他们的浏览器。

我更喜欢“ esolutions.se”风格，因为将自定义用户代理字符串添加到列表中可以轻松实现任意数量的自定义（也可以脱机运行，在某些情况下也可以使用）： https： //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

无论如何，那是我的2美分。：P