如何在桌面浏览器中快速打开页面的移动视图？

Question

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

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

Answer 1

火狐：

• 在 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

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

苹果浏览器：

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

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

边缘：

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

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

Answer 2

Flimm 的回答是 100% 正确的。为了防止记住快捷方式太麻烦，开发者工具中的这个蓝色按钮可以在网络视图和移动/平板电脑视图之间切换：

或使用 Firefox：

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